zoukankan      html  css  js  c++  java
  • DOM控制表格

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <script type="text/javascript">
    function addRow(name,score1,score2){
    var Table=document.getElementById("scoreTable");
    var numRows=Table.rows.length;//表格行数
    var newRow=Table.insertRow(numRows);//在表格最后一行插入新行

    var cell0=newRow.insertCell(0);//插入单元格1
    var cell1=newRow.insertCell(1);//插入单元格2
    var cell2=newRow.insertCell(2);//插入单元格3

    cell0.innerHTML=name;
    cell1.innerHTML=score1;
    cell2.innerHTML=score2;

    }

    function addNewRow(){
    addRow("none","0","0");
    }
    function calcScore(){
    var score1List=document.getElementsByName("s1");
    var score2List=document.getElementsByName("s2");

    var sumScore1=0;//记录科目1 总成绩
    var sumScore2=0;//记录总成绩科目2

    for(var i=0;i<score1List.length;++i){
    sumScore1+=parseInt(score1List[i].firstChild.data);
    sumScore2+=parseInt(score2List[i].firstChild.data);

    }
    addRow("总计",sumScore1,sumScore2);
    }
    </script>
    <body>
    <div>
    <table id="scoreTable" width="180px">
    <tr align="left">
    <th>姓名</th><th>科目1</th><th>科目2</th>
    </tr>
    <tr>
    <td name="stu">john</td>
    <td name="s1">96</td>
    <td name="s2">85</td>
    </tr>
    <tr>
    <td name="stu">Tom</td>
    <td name="s1">90</td>
    <td name="s2">87</td>
    </tr>
    </table>
    <input type="button" value="添加新行" onclick="addNewRow()"/>
    <input type="button" value="计算成绩" onclick="calcScore()"/>
    </div>
    </body>
    </html>

  • 相关阅读:
    CSS清除浮动的方法
    JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
    数据类型真假的问题
    数据类型——方法总结(可能有不对的)
    attr()与setAttribute()的区别
    wampserver 2.5多站点配置
    php常用函数(持续中)
    php中环境变量
    编码转换
    php中rsa加密及解密和签名及验签
  • 原文地址:https://www.cnblogs.com/wxhhts/p/8005660.html
Copyright © 2011-2022 走看看