经过在网上的查找,终于弄好了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>