javascript动态添加和删除表格行代码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > javascript动态添加和删除表格行代码下载

在很多操作中可能需要根据实际需要动态的添加或者删除一些元素，比如会员中心可能需要根据需要决定上传图片的数量，所以有时候就要动弹添加上传空间，本章节通过实例代码介绍一下如何实现冬天的添加或者删除表格行效果。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type ="text/javascript" >
function addNewRow(){
  var tabObj=document.getElementById("myTab");//获取添加数据的表格
  var rowsNum = tabObj.rows.length;  //获取当前行数
  var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
  var myNewRow = tabObj.insertRow(rowsNum);//插入新行
  var newTdObj1=myNewRow.insertCell(0);
  newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
  var newTdObj2=myNewRow.insertCell(1);
  newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
  var newTdObj3=myNewRow.insertCell(2);
  newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
  var newTdObj4=myNewRow.insertCell(3);
  newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
}
//窗口表格删除一行
function removeRow(){
  var chkObj=document.getElementsByName("chkArr");
  var tabObj=document.getElementById("myTab");
  for(var k=0;k<chkObj.length;k++){
    if(chkObj[k].checked){
      tabObj.deleteRow(k+1);
      k=-1;
    }
  }
}
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="删除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
  <tr>
    <td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
    <td width="40px" class="top-bt liebiao-c" align="center" >序号</td>
    <td class="top-bt liebiao-c" align="center" >节点名称</td>
    <td width="80px" class="top-bt liebiao-c" align="center" >节点比例</td>
  </tr>
</table>
</body>
</html>

代码描述：javascript动态添加和删除表格行。javascript动态添加和删除表格行代码下载

下载全部收藏

116 155

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册