用JS实现动态添加或删除表格的行,有两种方法:
(1)添加:用HTML DOM Table对象的insertRow()方法创建TableRow对象,一个
TableRow对象代表一个<tr>标签,再调用TableRow对象的insertCell()方法
创建TableCell对象,一个TableCell对象代表一个<td>标签
删除:同样用Table对象的deleteRow(index),和TableRow对象deleteCell(index)
方法删除各子对象
(2) 添加:使用DOM 对象的createElement()方法,此方法可以创建绝大部分的HTML对
象,通过appendChild()方法将各个HTML对象嵌套在一起
删除:用DOM对象的removeChild(obj)方法删除各子对象
示例:
表单HTML
<input type="button" value="添加" οnclick="addRow('tab')"/>
<table width="350" height="36" border="1" id="tab">
<tr>
<th width="64" height="30" scope="col">姓名</th>
<th width="204" scope="col">地址</th>
<th width="60" scope="col">操作</th>
</tr>
</table>
//JS脚本--第一种方法
<script type="text/javascript">
//取得指定id的对象
function getObj(id){
return document.getElementById(id);
}
//添加行函数
function addRow(tabName){
//取得table的对象
var tab=getObj(tabName);
//添加行
var row=tab.insertRow(tab.rows.length);
//添加三列
var nameCell=row.insertCell(row.cells.length);
var addressCell=row.insertCell(row.cells.length);
var buttonCell=row.insertCell(row.cells.length);
//给name输入栏和address输入栏赋值
nameCell.innerHHTML="张三";
addressCell.innerHTML="北京";
//在第三列加上删除当前列按钮
buttonCell.innerHTML='<input value="删
除"type="button"οnclick="deleteRow(this)"/>';
}
//删除列函数,删除方法传入参数为行的索引
function deleteRow(obj){
var row=obj.parentNode.parentNode;
var tab=row.parentNode;
tab.deleteRow(row.rowIndex);
}
</script>
//JS脚本--第二种方法
<script type="text/javascript">
//取得指定id的对象
function getObj(id){
return document.getElementById(id);
}
//添加行函数
function addRow(tabName){
//取得table的对象
var tab=getObj(tabName);
//添加行
var tr = document.createElement("tr");
//添加三列
var th=document.createElement("th");
var td1=document.createElement("td");
var td2=document.createElement("td");
//给th,td1 赋值,给td2添加点击事件
th.innerText="100";
td1.innerText="张三";
//如果是Mozilla系列,用addEventListener
td2.attachEvent("onclick",deleteRow(this));
//将th td1 td2赋给tr
tr.appendChild(th);
tr.appendChild(td1);
tr.appendChild(td2);
//将tr添加到table
tab.appendChild(tr);
}
//删除列函数,删除方法传入参数为对象
function deleteRow(obj){
var row=obj.parentNode.parentNode;
var tab=row.parentNode;
tab.removeChild(row);
} </script>