原生js实现表格内容增删改table表格中的常用方法和属性:deleteRow(行号):删除行rowIndex:获取当前

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>