提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS代码 利用 删除 示例 添加 动态 Table
2023-06-13 09:15:14 时间

如下所示：

复制代码代码如下:

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

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

<html>
<head>
<title></title>
</head>
<body>
<tableid="testTbl"border=1>
<tr>
<td>
产品名称
</td>
<td>
产品数量
</td>
<td>
产品单价
</td>
</tr>
<tr>
<td>
<selectname="a">
  <optionvalue="电子">电子</option>
  <optionvalue="电器">电器</option>
</select></td>
<td>
   <inputtype="text"name="b">
    </td>
<td>
   <inputtype="text"name="c">
    </td>
</td>
</table>
<inputtype="button"name="Submit2"value="添加"onclick="addRow()">
<script>
functionaddRow(){
//添加行

varnewTr=testTbl.insertRow();
//添加列
varnewTd0=newTr.insertCell();
varnewTd1=newTr.insertCell();
varnewTd2=newTr.insertCell();
varnewTd3=newTr.insertCell();
//设置列内容和属性

newTd0.innerText=document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText=document.all("b").value;
newTd2.innerText=document.all("c").value;
newTd3.innerHTML="<inputtype="button"name="del"value="删除"onclick="del(this)">";
}
functiondel(o)
{
var  t=document.getElementById("testTbl");
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>

相关文章