怎么用JS做一个表格的增删改查
展开全部
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="tab" width="400px" border="1px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<hr>
<form name="myform" action="" onsubmit="return false">
姓名： <input type="text" name="user"><br>
年龄： <input type="number" name="age"><br>
性别： <input type="text" name="sex"><br>
<br>
<button onclick="getMessage()">提交</button>
</form>
<script>
var tab = document.getElementById('tab');
var user = document.myform.user;
var age = document.myform.age;
var sex = document.myform.sex;
function getMessage(){
//创建行
var tr = tab.insertRow(tab.rows.length);
tr.insertCell(0).innerHTML = user.value;
tr.insertCell(1).innerHTML = age.value;
tr.insertCell(2).innerHTML = sex.value;
tr.insertCell(3).innerHTML = '<button onclick="del(this)">删除</button>';
}
function del(n){
var index = n.parentNode.parentNode.rowIndex;
console.log(index);
tab.deleteRow(index);
}
</script>
</body>
</html>
上代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
