用JavaScrip实现表格中的一些操作_在javascrip里实现表格-CSDN博客

本文链接：https://blog.csdn.net/banmengyou/article/details/80140941

这周我们学习了如何在表格中添加数据，是在上一次让表格实现全选和删除操作之后，使用fieldset和legend来在表格中添加，刚开始的时候，老师讲我只是将其大概的代码记住了，但是真要自己做的时候，还是有些困难。其代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#mytable{
width: 400px;
border:1px solid black;
margin: 10px auto;
border-collapse: collapse;
text-align: center;
}
td{
border:1px solid black;
}
#mytr{
background-color:#e6ffff;
}
</style>
<script type="text/javascript">
function check1(ck){
var mycheck=document.getElementsByTagName('input');
for(var i=0;i<mycheck.length;i++){
mycheck[i].checked=ck.checked;
}
}
function mybutton(){
var mychk=document.getElementsByName('check');
for(var i=0;i<mychk.length;i++){
if(mychk[i].checked){
var delchk=mychk[i].parentNode.parentNode;
var pchk=delchk.parentNode;
pchk.removeChild(delchk);
i--;
}
}
}

function myadd(){
var myxm=document.getElementById('stuname').value;
var myage=document.getElementById('age').value;
var mysex=document.getElementsByName('sex');
var sex='';
for(var i=0;i<mysex.length;i++){
if(mysex[i].checked){
sex=mysex[i].value;
break;
}
}
var mytr=document.createElement("tr");
var mytd1=document.createElement("td");
mytd1.innerHTML='<input type="checkbox" name="check">';
mytr.appendChild(mytd1);
var mytd2=document.createElement("td");
mytd2.innerHTML=myxm;
mytr.appendChild(mytd2);
var mytd3=document.createElement("td");
mytd3.innerHTML=myage;
mytr.appendChild(mytd3);
var mytd4=document.createElement("td");
mytd4.innerHTML=sex;
mytr.appendChild(mytd4);
var mytd5=document.createElement("td");
mytd5.innerHTML='<a href="#" id="mya">del</a>';
mytr.appendChild(mytd5);
var mytable=document.getElementsByTagName('table')[0];
mytable.appendChild(mytr);

}

window.οnlοad=function(){
var btnlist=document.getElementsByTagName('a');
for (var i = 0; i < btnlist.length; i++) {
var alink=btnlist[i];
alink.οnclick=function(){
var delnode=this.parentNode.parentNode;
var pnode=delnode.parentNode;
pnode.removeChild(delnode);
}
}
var trs=document.getElementsByTagName('tr');
for(var j=1;j<trs.length;j++){
var mytr=trs[j];
var oldcolor='';
mytr.οnmοuseοver=function(){
oldcolor=this.style.background;
this.style.background='#e1e1e1';
}
mytr.οnmοuseοut=function(){
this.style.background=oldcolor;
}
}
}
</script>
</head>
<body>
<table id="mytable">
<tr>
<td><input type="checkbox" name='check1' οnclick="check1(this)">全选</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>删除</td>
</tr>
<tr id="mytr">
<td><input type="checkbox" name='check' value='1'></td>
<td>张三</td>
<td>15</td>
<td>男</td>
<td id="mytd"><a href="#" id="mya">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name='check' value='2'></td>
<td>李四</td>
<td>16</td>
<td>女</td>
<td id="mytd"><a href="#" id="mya">del</a></td>
</tr>
<tr id="mytr">
<td><input type="checkbox" name='check' value='3'></td>
<td>王五</td>
<td>17</td>
<td>男</td>
<td id="mytd"><a href="#" id="mya">del</a></td>
</tr>
<tr>
<td><input type="checkbox" name='check' value='4'></td>
<td>Beans</td>
<td>18</td>
<td>女</td>
<td id="mytd"><a href="#" id="mya">del</a></td>
</tr>
<tr id="mytr">
<td><input type="checkbox"name='check'value='5'></td>
<td>Milk</td>
<td>19</td>
<td>男</td>
<td id="mytd"><a href="#" id="mya">del</a></td>
</tr>
</table>
<input type='button' name='del' value='删除' οnclick="mybutton()">
<fieldset>
<legend>添加学生信息</legend>
<div class="lr">
<label for="">姓名</label>
<input type="text" name="stuname" id="stuname">
</div>
<div class="lr">
<label for="">年龄</label>
<input type="text" name="age" id='age'>
</div>
<div class="lr">
<label for="">性别</label>
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</div>
<div class="lr">
<input type="button" name="add" value="添加" οnclick="myadd()">
<input type="reset" name="reset" value="重置">
</div>
</fieldset>

</body>
</html>