用javascript在网页中向表格中添加信息

最新推荐文章于 2024-05-24 08:56:19 发布

runrunsang

最新推荐文章于 2024-05-24 08:56:19 发布

阅读量630

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41898663/article/details/80118377

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
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 checkall(chk){
//全选是否被选中打钩 ischeck true 没打勾 ischeck false
var ischeck=chk.checked;
//获取页面除了全选以外的复选框
var list=document.getElementsByName('chkstu');
for(var i=0;i<list.length;i++){
var mychk=list[i];
mychk.checked=ischeck;
}
}
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=sex;
mytr.appendChild(mytd3);

mytd4=document.createElement("td");
mytd4.innerHTML=age;
mytr.appendChild(mytd4);

mytable=document.getElementsByTagName("table")[0];
mytable.appendChild(mytr);
//光棒效果
var trlist=document.getElementsByTagName('tr');
//循环给每一个tr添加 onmouseover和onmouseout事件
for( var i=1;i<trlist.length;i++){
var mytr=trlist[i];
var oldbgcolor;//旧背景颜色
mytr.οnmοuseοver=function(){
//给tr修改背景颜色以前保存原来背景色到变量里
oldbgcolor=this.style.background;
this.style.background='#f1f1f1';

}
mytr.οnmοuseοut=function(){
//鼠标离开tr时背景色恢复原来的颜色
this.style.background=oldbgcolor;
}
}
}

</script>
<style type="text/css">
table {
width: 400px;
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
table,fieldset{
margin:100px;auto;
}
.button{
margin:100px;auto;
}
tr {
border: 1px solid black;
}
td {
border: 1px solid black;
width: 100px;
}
.beijing {
background-color: pink;
}
.anniu{
margin:100px auto;
}
</style>
</head>
<body>
<table>
<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>男</td>
<td>18</td>
</tr>
<tr >
<td><input type='checkbox' name='chkstu'></td>
<td>冯宝宝</td>
<td>女</td>
<td>100000</td>
</tr>
<tr class="beijing">
<td><input type='checkbox' name='chkstu'></td>
<td>张灵玉</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td><input type='checkbox' name='chkstu'></td>
<td>张锡林</td>
<td>男</td>
<td>80</td>
</table>
<div class="button">
<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='保存' οnclick='save()'></div>
</form>
</fieldset>
</body>
</html>