|
table表格中的常用方法和属性: deleteRow(行号):删除行 rowIndex:获取当前行数的数值 insertRow(行号):添加一行,行数的值 insertCell(数字):添加的是td单元格,数字代表单元格 parentNode:代表找的是父节点[HTML] 纯文本查看 复制代码 <!doctype html>[/align]<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="600" border="1" id="frm">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td><button>删除</button></td>
</tr>
</table>
<form action="" name="frm">
姓名: <input type="text" name="user">
性别: <input type="text" name="age">
<input type="submit">
</form>
<script>
var frm=document.getElementById("frm");
function deltr(obj){
frm.deleteRow(obj.parentNode.parentNode.rowIndex);
}
function addtr(){
var user=document.frm.user.value;
var age=document.frm.age.value;
var index=frm.rows.length;
var newtr=frm.insertRow(index);
newtr.insertCell(0).innerHTML=index;
newtr.insertCell(1).innerHTML=user;
newtr.insertCell(2).innerHTML=age;
newtr.insertCell(3).innerHTML='<button>删除</button>';
index++;
return false;
}
</script>
</body>
</html> 效果展示:
| 
收藏
淘帖
踩
