您的位置：首页 > Web前端 > JavaScript

js实现往表格动态添加学生的学号、姓名、语数英的考试成绩和总分(总分不是填写)，实现行与行之的颜色相间，高光的效果

2017-04-22 16:13 1011 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>学生成绩表</title>
<style>
*{
padding: 0;
margin: 0;
}

body{
font-family: "微软雅黑";
color: #999;
margin: 20px;
}

.form{margin-bottom:20px ;}

input[type=text]{
font-size: 14px;
width: 80px;
height: 20px;
border: none;
outline: none;
border: 1px solid #999;
line-height: 20px;
margin: 0 10px 0 3px;
padding-left: 5px;
}

table{
border: 1px solid #999;
border-collapse: collapse;
width: 820px ;
}

table th, table td {
border: 1px solid black;
text-align:center;
width: 116px;
}
</style>
</head>
<body>
<div class="form">
<label for="">学号:<input type="text"  /></label>
<label for="">姓名:<input type="text"  /></label>
<label for="">语文成绩:<input type="text" /></label>
<label for="">数学成绩:<input type="text" /></label>
<label for="">英语成绩:<input type="text" /></label>
<input type="button"  value="添加" onclick="addData()"/>
</div>
<table  >
<thead>
<tr><th>学号</th><th>姓名</th><th>语文成绩</th><th>数学成绩</th><th>英语成绩</th><th>总分</th><th>操作</th></tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script type="text/javascript">
//(function(){
var oTable = document.querySelector('table');
// 隔行变色
function foo1(){
for(i=0;i<oTable.tBodies[0].rows.length;i++){
if(i%2==0){
oTable.tBodies[0].rows[i].style.backgroundColor = '#99CCCC';
}else{
oTable.tBodies[0].rows[i].style.backgroundColor = '#99CC99';
}
}
};
//高光效果
function foo2(){
for(i=0;i<oTable.tBodies[0].rows.length;i++){
oTable.tBodies[0].rows[i].onmouseover=function(){
oldBg = this.style.backgroundColor;
this.style.backgroundColor = '#3333FF';
}
oTable.tBodies[0].rows[i].onmouseout=function(){
this.style.backgroundColor = oldBg;
}
}
};

function addData(){
// 1. 获取到所有的input标签
var oInputs = document.getElementsByTagName('input');
// 2. 拼接td
var sTd = '<td>'+oInputs[0].value+
'</td><td>'+oInputs[1].value+
'</td><td>'+oInputs[2].value+
'</td><td>'+oInputs[3].value+
'</td><td>'+oInputs[4].value+
'</td><td></td>'+
'<td><a href="#">删除</a></td>';
// 3. 创建tr节点
var oTr = document.createElement('tr');
// 4. 把td字符添加到tr节点
oTr.innerHTML = sTd;
// 5. 给删除添加事件
// oTr的第7个子节点是td，要给a标签绑定事件，需要继续获取td的子节点
oTr.children[6].children[0].onclick = function(){
deleteTr(this);
}
// 6. 往todies里追加一行
oTable.tBodies[0].appendChild(oTr);
foo1(); //隔行变色
foo2();//高光效果

//自动计算总分
for(i=0;i<oTable.tBodies[0].rows.length;i++){
var Chinese =  parseInt(oInputs[2].value);
var Math = parseInt(oInputs[3].value);
var Engish = parseInt(oInputs[4].value);
var sum = Chinese+Math+Engish;
var oTd = oTable.tBodies[0].rows[i].cells[5];
oTd.innerHTML = sum;
};
};
//点击a标签,从bodies里删除一行
function deleteTr(a) {
var tr = a.parentNode.parentNode;
oTable.tBodies[0].removeChild(tr);
};

//})()
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航