代码目录
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态增加表格</title>
</head>
<body>
用户名：<input type="text" id="name"><br/>
性 别：<input type="text" id="sex"><br/>
年 龄：<input type="text" id="age"><br/>
<input type="button" value="增加" onclick="addrow()">
<table id="mytab" border="1">
<tr>
<td>用户名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
function addrow() {
var tab = document.getElementById("mytab");
var name = document.getElementById('name').value;
var sex = document.getElementById('sex').value;
var age = document.getElementById('age').value;
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
var td_name = document.createElement("td");
var td_sex = document.createElement("td");
var td_age = document.createElement("td");
var td_action = document.createElement("td");
var vinput = document.createElement("input");
vinput.setAttribute("type","button");
//vinput.setAttribute("id","vinput");
vinput.setAttribute("value","删除");
vinput.setAttribute("onclick","delrow(this)");
td_name.appendChild(document.createTextNode(name));
td_sex.appendChild(document.createTextNode(sex));
td_age.appendChild(document.createTextNode(age));
td_action.appendChild(vinput);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_age);
tr.appendChild(td_action);
tbody.appendChild(tr);
tab.appendChild(tbody);
}
function delrow(obj){
var row = obj.parentNode.parentNode;//按钮所在行
console.log(row);
var rowIndex = row.rowIndex;//按钮所在行的下标
console.log(rowIndex);
var tb = row.parentNode.parentNode;//两个parentNode
console.log(tb);
tb.deleteRow(rowIndex);
}
</script>
</body>
</html>
原创文章，作者：witersen，如若转载，请注明出处：https://www.witersen.com
微信扫一扫