JS实现添加和删除TR行（一）

经过在网上的查找，终于弄好了JS添加和删除TR的效果。

JS代码如下：

添加tr的JS代码

function addRemark(){
		//table_name 是table的id
		var tr = document.getElementById("table_name").insertRow();
		//添加一个td		
		var td1 = tr.insertCell();
		td1.width="75px";
		//设置td的class属性
		td1.className="inputform_title";
		
		//显示td中的内容	
		td1.innerHTML = "REMARK:";
		
		var td2 = tr.insertCell();

		//设置td所占的colspan数。注意，是colSpan而不是colspan
		td2.colSpan='6';
		td2.innerHTML = "<textarea rows='4' style='width:570px'></textarea><input type='button' onClick='deleteRemark(this);' value='删除' />";
				
		
	} 

在实际中，我们更多的是要在指定行添加tr。这样，我们就需要对insertRow()方法进行设置。

insertRow()默认在table表的最后一行再添加一行。而insertRow(n)则表示在table中的第n行的后面添加行。

删除tr的JS代码：

function deleteRemark(obj){
		var row = obj.parentNode.parentNode;  //获取当前行
		var tb = row.parentNode;   //获得当前表格
		var rowIndex = row.rowIndex;	//获取当前行的索引
		tb.deleteRow(rowIndex);  //通过行索引删除行
	}

HTML代码：

 <tr>
          <td width="75" nowrap class="inputform_title">Remark：</td>
          <td colspan="6">
		  <textarea rows="4" style="width:570px">
		  
		  </textarea>
		  
		<!--以下table不是重点-->
		 <table border="0" cellpadding="0" cellspacing="0" class="button_table"  onClick="addRemark();">
                  <tr>
                    <td class="button_table_lc"><img src="../styles/style17/icons/icons_28.gif" width="16" height="16"></td>                    
                  </tr>
          	</table>
	</td>
 </tr>