1. 程式人生 > >JS實現新增和刪除TR行(一)

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>