<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
}
tr{border: 1px solid red;}
td{
width: 150px;
height: 30px;
}
</style>
</head>
<body>
<div>
<input type="button" value="删除一行" onclick="deleteRow()"/>
</div>
<table>
<thead>
<tr>
<th><input type="checkbox" id="check_all" />学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody id="tab_Student"></tbody>
</table>
<script>
//控制添加行数的索引
var arr=[
[1,'张三1',"女"],
[2,'张三2',"男"],
[3,'张三3',"女"],
[4,'张三4',"女"],
[5,'张三5',"男"],
[6,'张三6',"男"]
];
window.onload=function (){
var tab=document.getElementById("tab_Student");
for(i=0;i<arr.length;i++){
var tr=document.createElement("tr");
var td=document.createElement("td");
var put=document.createElement("input");
put.type="checkbox";
var checktext=document.createTextNode(arr[i][0]);
td.appendChild(put);
td.appendChild(checktext);
tr.appendChild(td);
for(j=1;j<arr[i].length;j++){
var td=document.createElement("td");
var txt=document.createTextNode(arr[i][j]);
td.appendChild(txt);
tr.appendChild(td);
}
tab.appendChild(tr);
}
function deleteRow(){
var input=document.getElementById("tab_Student").getElementsByTagName("input");
for(i=input.length-1;i>=0;i--){
if(input[i].type=="checkbox"&&(input[i].checked=="checked"||input[i].checked||input[i].checked=="yes")){
tab.deleteRow(i);
}
}
}
}
</script>
</body>
</html>
相关分类