在JavaScript中动态的添加行数，请问怎么在第四列添加一个按钮？
在JavaScript中动态的添加数据，请问怎么在第四列添加一个按钮，每动态添加一行数据之后，第四列都有一个删除按钮？...
在JavaScript中动态的添加数据，请问怎么在第四列添加一个按钮，每动态添加一行数据之后，第四列都有一个删除按钮？
展开
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
table{
margin:0 auto;
width:400px;
border-collapse:collapse;
}
caption{
font:bolder 26px '';
}
th,td{
border:1px solid gray;
text-align:center;
}
</style>
<script>
var add=function(){
var arr=[a.value,b.value,c.value,0];
var tr=tb.insertRow(tb.rows.length-2);
for(var i=0;i<arr.length;i++){
var td=tr.insertCell(tr.cells.length);
if(i<arr.length-1){
td.innerHTML=arr[i];
}else{
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
var tr=this.parentElement.parentElement;
tb.deleteRow(tr.rowIndex);
}
td.appendChild(btn);
}
}
}
</script>
</head>
<body>
<table id="tb">
<caption>动态创建表格</caption>
<tr><th>姓名</th><th>年龄</th><th>性别</th><th>删除</th></tr>
<tr>
<td rowspan=3 colspan=4>
输入要添加的姓名：<input type="text" id="a" /><br />
输入要添加的年龄：<input type="text" id="b" /><br />
输入要添加的性别：<input type="text" id="c" /><br />
<input type="button" value="添加" onclick="add()" />
</td>
</tr>
<tr>
</table>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
