Keep on going, never give up.

网页编程中如何动态的添加删除表格行

在网页编程时,有时候需要动态的添加或删除表格行,本文提供的方法支持:显示当前选中行索引、动态增加表格行、动态删除表格行,天缘实测IE和FIREFOX下OK,存档参考。

特别说明,程序里头天缘取了个巧,因为在IE下textContent属性无效,而在FIREFOX下innerText无效,所以就干脆写两个,哪个OK运行哪个,严格起来应该根据浏览器判断使用。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
iIndex = 2;//从第二行下开始插入
function showIndex(){
alert(iIndex);
}
function getIndex(){
//iIndex = event.srcElement.parentElement.rowIndex;
iIndex = event.srcElement.parentElement.parentElement.rowIndex;
}

function deleteRow(tblID, rowIndex)
{
    var table =document.all[tblID]
    table.deleteRow(rowIndex);
    iIndex--;
}

function insertRow(iPos){
    var objtr=TestTbl.insertRow(iPos);
    var objcell=objtr.insertCell(0);
    objcell.innerText="第...行";//IE
    objcell.textContent="第...行";//firefox
    var objcell=objtr.insertCell(1);
    objcell.innerText="I am OK!";//IE
    objcell.textContent="I am OK!";//firefox
    iIndex++;
}

</script>
</head>
<body>
<center>
<table id="TestTbl" border=1 width="300" align="center">
<tr><td>第0行</td><td><input name="Method1" type="button" onClick="deleteRow('TestTbl',0)" value="删除当前选中行"></td></tr>
<tr><td>第1行</td><td onClick="deleteRow('TestTbl',1)">删除本行</td></tr>

<tr><td>...</td><td onClick="insertRow(iIndex)">...</td></tr>
<tr><td>第N行</td><td onClick="insertRow(iIndex)">插入一行</td></tr>
</table>

<input type="button" onClick="showIndex(iIndex)" value="显示当前选中行">
<input type="button" onClick="insertRow(iIndex)"   value="在当前位置插入一行">
<input type="button" onClick="deleteRow('TestTbl',iIndex)"   value="删除当前选中行">
</center>
</body>
</html>

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.