如何使用javascript建立動態表格,有新增,刪除功能

<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" οnclick="anotherAdd();return false;" value="隨機出題"/>
<input type="button" οnclick="AddRow();return false;" value="出題"/>
<input type="button" οnclick="DeleteRow();return false;" value="刪除"/>
<input type="button" οnclick="chooseAll();return false;" value="全選"/>
<input type="button" οnclick="chooseNo();return false;" value="全不選"/>
<input type="button" οnclick="ExcelIn();return false;" value="Excel導入"/>
<input type="button" οnclick="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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章