JavaScript动态添加删除表格行

直接贴代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>表格动态添加删除行</title>
  <style type="text/css">
    table.show{
      font-size:12px;
      border:1px solid #cad9ea;
      color:#666;
	  table-layout:automatic;
      empty-cells:show; 
      border-collapse: collapse;
      margin:0 auto;
	  cursor:default;
    }
    table.show th {
	  font-weight: bold;
	  color: #4D647C;
      background: #E5EDF9;
      height:30px;
    }
    table.show td{
      height:20px;
    }
    table.show td,table.show th{
      border:1px solid #cad9ea;
      padding:0 1em 0;
    }
    table.show tr.odd{
      background-color:#f5fafe;
    }
    table.show tr:hover{
      background:#FDFBDB;
    }
</style>
  <script type="text/javascript">
	//删除行
	function delRow(){
		window.event.srcElement.parentNode.parentNode.parentNode.removeChild(window.event.srcElement.parentNode.parentNode);
	}
	//删除所有数据行
	function delAllRows(){
		var rowParent = document.getElementById("mytab").childNodes[1];
		var rows = rowParent.rows;
		for(var i=rows.length-1;i>=0;i--){
			rowParent.removeChild(rows[i]);
		}
	}
	//获取当前行索引
	function showIndex(){
		alert("行索引:"+window.event.srcElement.parentNode.parentNode.rowIndex);
	}
	//添加行
	function appendRow(){
		var tr = document.createElement("tr");
		for(var i=0;i<5;i++){
			var td = document.createElement("td");
			switch(i){
				case 0:
				  var text = document.createTextNode("添加内容");
				  td.appendChild(text);
				  break;
				case 1:
				  var text = document.createTextNode("添加内容");
				  td.appendChild(text);
				  break;
				case 2:
				  var text = document.createTextNode("添加内容");
				  td.appendChild(text);
				  break;
				case 3:
				  var text = document.createTextNode("添加内容");
				  td.appendChild(text);
				  break;
				case 4:
				  var btn1 = document.createElement("input");
				  btn1.setAttribute("type","button");
				  btn1.setAttribute("value","删除");
				  btn1.onclick = delRow;
				  var btn2 = document.createElement("input");
				  btn2.setAttribute("type","button");
				  btn2.setAttribute("value","行索引");
				  btn2.onclick = showIndex;
				  td.appendChild(btn1);
				  td.appendChild(btn2);
				  break;
			}
			tr.appendChild(td);
		}
		document.getElementById("mytab").childNodes[1].appendChild(tr);
	}
  </script>
 </head>

 <body>
   <center>
     <input type="button" value="删除所有表格" onclick="delAllRows();">
     <input type="button" value="追加表格" onclick="appendRow();">
   </center>
   <table width="90%" id="mytab"  border="1" class="show">
     <thead>
       <th width="10%">标题一</th>
       <th width="30%">标题二</th>
       <th width="20%">标题三</th>
       <th width="30%">标题四</th>
       <th width="10%">操作</th>
     </thead>
     <tr class="odd">
       <td>wallimn</td>
       <td>http://blog.csdn.net/wallimn</td>
       <td>[email protected]</td>
       <td>http://wallimn.ys168.com</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow(this);" id="btn">删除</a></td>
     </tr>
     <tr>
       <td>长三江</td>
       <td>村在</td>
       <td>北京天安门</td>
       <td>东四十条</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
     <tr class="odd">
       <td>长三江</td>
       <td>村在</td>
       <td>北京天安门</td>
       <td>东四十条</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
     <tr>
       <td>长三江</td>
       <td>村在</td>
       <td>北京天安门</td>
       <td>东四十条</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
     <tr class="odd">
       <td>wallimn</td>
       <td>http://blog.csdn.net/wallimn</td>
       <td>[email protected]</td>
       <td>http://wallimn.ys168.com</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
     <tr>
       <td>长三江</td>
       <td>村在</td>
       <td>北京天安门</td>
       <td>东四十条</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
     <tr class="odd">
       <td>长三江</td>
       <td>村在</td>
       <td>北京天安门</td>
       <td>东四十条</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
     <tr>
       <td>长三江</td>
       <td>村在</td>
       <td>北京天安门</td>
       <td>东四十条</td>
       <td><a href="javascript:void(0);" onclick="showIndex();">行索引</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="delRow();">删除</a></td>
     </tr>
   </table>
 </body>
</html>

总结:此处<tr>的父节点是<tbody>而非<table>,追加行时要追加到<tbody>节点中,否则新添加的行不能删除与<tbody>同级,调用代码中删除方法时不能删除添加的行。

备注:本代码基于IE,且IE 9操作效果与IE 6、7、8有差异,如有更好实现方式,请各位指教。

 

你可能感兴趣的:(JavaScript表格操作,添加删除行)