html快捷添加10行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 = "";

}

在实际中,我们更多的是要在指定行添加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代码:

Remark:
经过在网上的查找,终于弄好了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 = ""; } 在实际中,我们更多的是要在指定行添加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代码:Remark:
经验分享 程序员 微信小程序 职场和发展