您的位置：首页 > Web前端 > JavaScript

如何使用javascript建立动态表格，有新增，删除功能

2013-12-01 13:16 996 查看 
<html>
<head>
<title>tableTest</title>
<SCRIPT LANGUAGE = JavaScript>
function AddRow()
{
var table = document.getElementById("tbl");
var cellno = table.rows[0].cells.length;
//表格列数
var rowno = table.rows.length; //表格行数
thisrow = table.insertRow(rowno); //添加一行
for (i = 0; i < cellno; i++)
{ //添加n列
thiscell = thisrow.insertCell(i);
if (i == 0)
{
thiscell.innerHTML = '<input type="checkbox" />'+ thisrow.rowIndex;
}

else if (i == cellno - 4)
{
thiscell.innerHTML = "="; //显示行数
}
else if(i==2){
thiscell.innerHTML="<select><option value='+'>+</option> <option value='-'>-</option><option value='*'>*</option><option value='/'>/</option><option value='%'>%</option></select>"

}
else
{
thiscell.innerHTML = "<input type='text'/>";
}
}
}

function DeleteRow()
{
var table = document.getElementById("tbl");
rowno = table.rows.length;
for (i = rowno; i > 0; i--)
{
if (table.rows[i - 1].cells[0].childNodes[0].checked)
{
table.deleteRow(i - 1);
}
}
ResortTbl();
}

function ResortTbl()
{
var table = document.getElementById("tbl");
rowno = table.rows.length;
for (i = 1; i < rowno; i++)
{ // 重新赋值
table.rows[i].cells[0].innerHTM = '<input type="checkbox" />'+ i; //显示行数
}
}

function anotherAdd()//随机出题行数
{
AddRow();
arr=new Array("+","-","*","/","%");
i=Math.round(Math.random()*100);
j=Math.round(Math.random()*100);
fh=arr[Math.round(Math.random()*100)%5];
do{
thisrow.cells[1].childNodes[0].value = i;
thisrow.cells[2].childNodes[0].value = fh;
thisrow.cells[3].childNodes[0].value =j;
}while(((fh=="/")||(fh=="%"))&&j==0) //防止分数为0

}

function chooseAll()
{
var table = document.getElementById("tbl");
var cellno = table.rows[0].cells.length; //表格列数
var rowno = table.rows.length; //表格行数
for (i = 1; i < rowno; i++)
{
table.rows[i].cells[0].childNodes[0].checked = true;
}
}

function chooseNo()
{
var table = document.getElementById("tbl");
var cellno = table.rows[0].cells.length; //表格列数
var rowno = table.rows.length; //表格行数
for (i = 1; i < rowno; i++)
{
table.rows[i].cells[0].childNodes[0].checked = false;
}
}

function ExcelIn()
{
var exApp = new ActiveXObject("Excel.Application");
var exWBook = exApp.workbooks.open("002.xlsx")
var exWSheet = exWBook.Worksheets(1);
var colcount = exWSheet.UsedRange.Cells.Rows.Count; //excel的行数
var colcolumn = exWSheet.UsedRange.Columns.Count; //excel的列数
alert("行数：" + colcount + "列数：" + colcolumn)
for (var i = 1; i < 3; i++)
{
AddRow();
thisrow.cells[1].childNodes[0].value = exWSheet.cells(i + 1, 1).value;
thisrow.cells[2].childNodes[0].value = exWSheet.cells(i + 1, 2).value;
thisrow.cells[3].childNodes[0].value = exWSheet.cells(i + 1, 3).value;
}
exWBook.Close(savechanges = true);
//exWSheet.Close();
//exApp.Close();
exApp.Quit();
exApp = null;
//释放excel进程,关闭当前浏览器后有效。
}

function submitcheck(){//计算是否相等
var table = document.getElementById("tbl");
var cellno = table.rows[0].cells.length;
var count=0;//错误题目的个数
//表格列数
var rowno = table.rows.length;
for(i=1;i<rowno;i++){
one=table.rows[i].cells[1].childNodes[0].value;
fh=table.rows[i].cells[2].childNodes[0].value;
two=table.rows[i].cells[3].childNodes[0].value;
table.rows[i].cells[7].childNodes[0].value=changeTo(eval(one+fh+two));
if(table.rows[i].cells[7].childNodes[0].value==table.rows[i].cells[5].childNodes[0].value){
table.rows[i].cells[6].childNodes[0].value="对";
table.rows[i].cells[6].childNodes[0].style.backgroundColor="white";
count++;
}
else{
table.rows[i].cells[6].childNodes[0].value="错";
table.rows[i].cells[6].childNodes[0].style.backgroundColor="yellow";
}
var fenshu=changeTo(count/(rowno-1))*100;

var resultstr="本次共"+(table.rows.length-1)+"题目，您答对了"+count+"题。本次得分为"+fenshu;
document.getElementById("result").innerHTML=resultstr;
}

}
function changeTo(s){//控制小数为两位小数
return parseInt(s*100)/100;

}

</SCRIPT>

</head>
<body>
</div>
<div id="OptDiv">
<input type="button" onclick="anotherAdd();return false;" value="随机出题"/>
<input type="button" onclick="AddRow();return false;" value="出题"/>
<input type="button" onclick="DeleteRow();return false;" value="删除"/>
<input type="button" onclick="chooseAll();return false;" value="全选"/>
<input type="button" onclick="chooseNo();return false;" value="全不选"/>
<input type="button" onclick="ExcelIn();return false;" value="Excel导入"/>
<input type="button" onclick="submitcheck();return false;" value="提交"/>

</div>
<div>
<form>
<table id="tbl" border="1" width="600">
<tr>
<td width="2%"><font color=blue>Check</font></td>
<td align=center><font color=blue>第一个数</font></td>
<td align=center><font color=blue>符号</font></td>

<td align=center><font color=blue>第二个数</font></td>
<td width="10%" align=center><font color=blue>等   号</font></td>
<td align=center><font color=blue>结果</font></td>
<td align=center><font color=blue>对错</font></td>
<td align=center><font color=blue>正确答案</font></td>
</tr>
</table>
</form>
<div id="result"></div>
</div>
</body>

</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航