HTML纯JS添加删除行示例二
一、说明
此示例为一个纯html的添加删除行的示例。意在展示dom的操作中的insertRow和innerHTML的用法。
二、代码
<html>
<head><title>js添加删除行</title><script type="text/javascript">//要确定行的唯一性（提示：你可以使用你的主键）var id=1;
//添加行的方法function addTr(){//获得表格对象var tb=document.getElementById('testTab');//添加一行 var newTr = tb.insertRow(-1);//在最下的位置//给这个行设置id属性，以便于管理（删除）newTr.id='tr'+id;//设置对齐方式（只是告诉你，可以以这种方式来设置任何它有的属性）newTr.align='center';//添加两列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell();//设置列内容和属性 newTd0.innerHTML = "本行id为："+id; //让你看到删除的是指定的行newTd1.innerHTML= "<button onclick=\"moveTr('"+id+"');\" >移除</button>";;id++;}//移除行的方法function moveTr(id){//获得表格对象(注意此处是表格对象Table，如果用到了thead和tbody，而取的是tbody的对象的话，删除行时需要考虑索引问题，行索引是针对整体，而如果获取的是tbody对象，删除时需要的索引是针对tbody自身，所以一定要减去thead的行数，切记切记，否则就会异常)var tb=document.getElementById('testTab');//根据id获得将要删除行的对象var tr=document.getElementById('tr'+id);//取出行的索引，设置删除行的索引tb.deleteRow(tr.rowIndex);//清空列表，移除全部行的方法//while(tb_show.hasChildNodes()){//tb_show.deleteRow();//}}</script>
</head>
<body><center>表格：<table id="testTab" border="1" bordercolor="red" width="700px" height="300px"><tr><td>操控此表格</td><td>第二列</td></tr></table><button onclick="addTr();">添加一行</button></center>
</body>
</html>