删除

最新推荐文章于 2021-07-30 09:09:49 发布

fanhua_xiangban

最新推荐文章于 2021-07-30 09:09:49 发布

阅读量900

点赞数

本文链接：https://blog.csdn.net/fanhua_xiangban/article/details/80113723

版权

<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<script type="text/javascript">
function checkall(chk){
var list=document.getElementsByName("chkstu");
for(var i=0;i<list.length;i++){
var mychk=list[i];
mychk.checked=chk.checked;
}
}
function delsel(){
var chklist=document.getElementsByName("chkstu");
for(var i=chklist.length-1;i>=0;i--){
if(chklist[i].checked==true){
//删除
tr=chklist[i].parentNode.parentNode;
pnode=tr.parentNode;
pnode.removeChild(tr);
}
}
}
function save(){
var name=document.getElementById("stuname").value;
var age=document.getElementById("age").value;
var sex="";
var sexlist=document.getElementsByName("sex");
//判读男女性别
for(var i=0;i<sexlist.length;i++){
if(sexlist[i].checked==true){
sex=sexlist[i].value;
break;
}
}
//创建单元格文本框
mytr=document.createElement("tr");
mytd1=document.createElement("td");
mytd1.innerHTML='<input type="checkbox" name="chkstu">';
mytr.appendChild(mytd1);
//创建第二个单元格
mytd2=document.createElement("td");
mytd2.innerHTML=name;
mytr.appendChild(mytd2);
//第三个
mytd3=document.createElement("td");
mytd3.innerHTML=age;
mytr.appendChild(mytd3);
//第四个
mytd4=document.createElement("td");
mytd4.innerHTML=sex;
mytr.appendChild(mytd4);

mytable=document.getElementsByTagName("table")[0];
mytable.appendChild(mytr);
}
window.οnlοad=function(){
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length;i++){
var mytr=trlist[i];
var color="";
mytr.οnmοuseοver=function(){
color=this.style.background;
this.style.background='yellow';
}
mytr.οnmοuseοut=function(){
this.style.background=color;
}
}
}
</script>
<style type="text/css">
table,fieldset{
border: 1px solid #3CF;
border-collapse: collapse;
width: 400px;
height: auto;
}
td {
height: 40px;
line-height: 40px;
text-align: center;
}
.beijing {
background: orange;
}
</style>
</head>

<body>
<table border="1" align="center">
<tr>
<td><input type="checkbox" οnclick="checkall(this)">
全选</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr class="beijing">
<td><input type="checkbox" name="chkstu"></td>
<td>王玲</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu"></td>
<td>马倩</td>
<td>19</td>
<td>女</td>
</tr>
<tr class="beijing">
<td><input type="checkbox" name="chkstu"></td>
<td>史延书</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu"></td>
<td>钱亮</td>
<td>20</td>
<td>男</td>
</tr>
<tr class="beijing">
<td><input type="checkbox" name="chkstu"></td>
<td>碗娟</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu"></td>
<td>小明</td>
<td>19</td>
<td>男</td>
</tr>
<tr class="beijing">
<td><input type="checkbox" name="chkstu"></td>
<td>小李</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="chkstu"></td>
<td>婷婷</td>
<td>20</td>
<td>女</td>
</tr>
</table>
<div class="an" align="center">
<input type="button" value="删除所选" οnclick="delsel()" />
</div>
<fieldset>
<legend>添加学生信息</legend>
<form action="">
<div class="luru">姓名：
<input type="text" id="stuname">
</div>
<div class="luru">性别：
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女</div>
<div class="luru">年龄：
<input type="text" id="age">
</div>
<div class="luru">
<input type="button" value="保存" onClick="save()">
</div>
</form>
</fieldset>
</body>
</html>