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


<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;i0].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;i0].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 = ''+oInputs[0].value+
                    ''+oInputs[1].value+
                    ''+oInputs[2].value+
                    ''+oInputs[3].value+
                    ''+oInputs[4].value+
                    ''+
                    '删除';  
        // 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;i0].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>

你可能感兴趣的:(javascript,表格)