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

来源：互联网发布：linux 重启oracle 编辑：程序博客网时间：2024/05/01 23:48
<!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>
0 0