JS實現新增和刪除TR行(一)
阿新 • • 發佈:2019-02-04
經過在網上的查詢,終於弄好了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>