动态添加table,复选框删除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日考7</title>
<style>
table{
margin: 10px;
border: 1px solid #000;
}
th{
color: red;
background-color: yellow;
}
</style>
<script language="JavaScript">
var index=1;
function adddata(){
var _name=document.getElementById("name").value;
var _age=document.getElementById("pas").value;
var _em=document.getElementById("em").value;

var myTable = document.getElementById("mytable");//得到table对象
var myTr = document.createElement("tr");//动态创建一个行（tr）对象

var _td1 = document.createElement("td");//创建td标签
_td1.align="center";
var input_ = document.createElement("input");
input_.type="checkbox";
_td1.appendChild(input_);

var _td2 = document.createElement("td");
_td2.align="center";
var _newText2 = document.createTextNode(_name);
_td2.appendChild(_newText2);

var _td3 = document.createElement("td");
_td3.align="center";
var _newText3 = document.createTextNode(_age);
_td3.appendChild(_newText3);

var _td4 = document.createElement("td");
_td4.align="center";
var _newText4 = document.createTextNode(_em);
_td4.appendChild(_newText4);

var _td5 = document.createElement("td");
_td5.align="center";
var _input = document.createElement("input");
_input.type= "button";
_input.value = "删除";
_input.onclick=function(){
myTable.removeChild(myTr);
}
_td5.appendChild(_input);

myTr.appendChild(_td1);//把第一个td添加到tr中
myTr.appendChild(_td2);
myTr.appendChild(_td3);
myTr.appendChild(_td4);
myTr.appendChild(_td5);
myTable.appendChild(myTr);

index++;
}
</script>
</head>
<body>
<table>
<tr>
<td>用户:<input type="text" id="name"/></td>
<td>密码:<input type="text" id="pas" /></td>
<td>邮箱:<input type="text" id="em" /></td>
<td><input type="button" value="添加" onclick="adddata();"/></td>
</tr>
</table>
<center>
<table id="mytable">
<tr>
<th width="80">
<input type="checkbox" id="box"/>
</th>
<th width="100">用户名</th>
<th width="80">密码</th>
<th width="180">邮箱</th>
<th width="100">操作</th>
</tr>
</table>
</center>
</body>
</html> 动态添加table,复选框删除

动态添加table,复选框 删除

相关推荐

动态添加table,复选框删除