利用js动态添加删除table行的示例代码_javascript技巧

如下所示：

复制代码 代码如下:

//动态添加行
function addRow(){
   var table = document.getElementById("tableID");
   var newRow = table.insertRow(); //创建新行
   var newCell1 = newRow.insertCell(); //创建新单元格
   newCell.innerHTML = ""； //单元格内的内容
   newCell.setAttribute("align","center"); //设置位置
}

//动态删除行
function deleteRow(){
   var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById("tableID");
   styles.deleteRow(rowIndex);
}

产品名称	产品数量	产品单价
电子    电器

<script><BR>function addRow(){<BR>//添加行 <P>var newTr = testTbl.insertRow();<BR>//添加列<BR>var newTd0 = newTr.insertCell();<BR>var newTd1 = newTr.insertCell();<BR>var newTd2 = newTr.insertCell();<BR>var newTd3 = newTr.insertCell();<BR>//设置列内容和属性 <P>newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;<BR>newTd1.innerText = document.all("b").value;<BR>newTd2.innerText = document.all("c").value;<BR>newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';<BR>}<BR>function del(o)<BR>{<BR>var t=document.getElementById('testTbl');<BR>t.deleteRow(o.parentNode.parentNode.rowIndex)<BR>}<BR></script>