有時我們開發的界面表格的行個數是由用戶決定的,這時可以通過javascript實現動態添加刪除表格的行,來滿足需求。
1、 腳本:
<SCRIPT LANGUAGE="JavaScript">
<!--
var i = 0;
function addRow(){//添加表格的一行
oTR=idTB.insertRow(idTB.rows.length);
tmpNum=oTR.rowIndex;
oTD=oTR.insertCell(0);
oTD.innerText="第" + tmpNum+"行";//在該處添加的HTML代碼會原封不動的顯示在頁面上
oTD.innerHTML="第" + tmpNum+"行"+"<input length='5' type='text' name='txt"+tmpNum+"' value='"+tmpNum+"'>";//要在該格添加的HTML代碼填在這裏,因爲這裏是text,注意不要重名了。
idLast.innerText=idTB.rows.length-1;
if(idTB.rows.length>0)
idFirst.innerText='1';
return true;
}
function delRow(){//刪除表格的一行
sIndex=idIndex.value;
if(sIndex=='')
sIndex=idTB.rows.length-1;
else
sIndex=parseInt(sIndex)-1;
if (sIndex>1)
{
idTB.deleteRow(sIndex);
}
idLast.innerText=idTB.rows.length-1;
if(idTB.rows.length==0)
idFirst.innerText='0';
}
//-->
</SCRIPT>
2 、實現
<table id="idTB" border=0><!--注意id,與JS中的要相對應-->
<tr id=idTR>
</tr>
</table>
<input type="button" οnclick="addRow()" value="添加一行">
<input type="button" οnclick="delRow()" value="刪除一行"> 刪除哪一行:<input id="idIndex" length="5">(<a id="idFirst">1</a>~<a id="idLast">0</a>)