js动态添加和删除table表格行代码实例

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

本章节通过实例代码详细介绍一下如何给一个table表格动态的添加或者删除行。

代码如下:

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
var mailArr=[{ "title": "关于css代码", "name": "51前端", "date": "2014-05-11" }, 
{ "title": "js的dom对象", "name": "乱码", "date": "2014-03-06" }, 
{ "title": "jquery的this", "name": "烟雨", "date": "2014-02-21" }, 
{ "title": "情感问题", "name": "caicai", "date": "2014-06-08" } 
]; 
var tab=null; 
window.onload=function(){ 
  loadTab(); 
  document.getElementById("selA").onclick=function(){ 
    if(document.getElementById("selA").checked==true){ 
      seleAll(tab, true); 
    } 
    else{ 
      seleAll(tab, false); 
    } 
  }; 
  document.getElementById("delSel").onclick=function(){ 
    var chks = document.getElementsByTagName('input'); 
    for(var i=chks.length-2;i>=0;i--){ 
      var chk=chks[i]; 
      if(chk.checked==true){ 
        var rowNow=chk.parentNode.parentNode; 
        rowNow.parentNode.removeChild(rowNow); 
      } 
    } 
  }; 
};
function loadTab(){ 
  tab=document.getElementById("tb"); 
  for(var rowindex=0;rowindex<mailArr.length;rowindex++){ 
    var tr=tab.insertRow(tab.rows.length-1);
    var td1=tr.insertCell(-1); 
    td1.innerHTML="<input type='checkbox'/>"; 
    var td2=tr.insertCell(-1); 
    td2.innerHTML=mailArr[rowindex].title; 
    var td3=tr.insertCell(-1); 
    td3.innerHTML=mailArr[rowindex].name; 
    var td4=tr.insertCell(-1); 
    td4.innerHTML=mailArr[rowindex].date; 
  } 
}
function seleAll(mailTab,isSel){ 
  for (var i=0;i< mailTab.rows.length;i++){ 
    var tr=mailTab.rows; 
    tr.cells[0].childNodes[0].checked=isSel; 
  } 
} 
</script>
</head>
<body>
<table id="tb" border="1" style="border-collapse: collapse;">
  <tr>
    <th>序列</th>
    <th>标题</th>
    <th>发邮人</th>
    <th>发件时间</th>
  </tr>
  <tr>
    <td colspan="4">
      <input id="selA" type="checkbox" />
      <label for="selA">全选</label>
      <a href="#" id="delSel">删除</a>
    </td>
  </tr>
</table>
</body>
</html>

代码描述：js动态添加删除table表格行。js动态添加和删除table表格行代码实例

下载全部收藏

168 223

用户评论

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