• table 表格操作


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
       
        <script language="javascript" type="text/javascript">
            var intRowIndex = 0;
            function insertRow(tbIndex) {
                tbIndex = GetRowsCount();
                var objRow = myTable.insertRow(tbIndex);
                var objCel = objRow.insertCell(0);
                objCel.innerText = tbIndex;
                var objCel = objRow.insertCell(1);
                objCel.innerText = document.myForm.myCell1.value;
                var objCel = objRow.insertCell(2);
                objCel.innerText = document.myForm.myCell2.value;
                objRow.attachEvent("onclick",getIndex);
                objRow.style.background = "pink";

                CalHours();
            }

            function deleteRow(tbIndex) {
                if (tbIndex != 0) {
                    myTable.deleteRow(tbIndex);
                    intRowIndex = 0;

                    for (var i = 1; i < myTable.rows.length; i++) {
                        myTable.rows[i].cells[0].innerText = i;
                    }

                    CalHours();
                }
                else {
                    alert("请选择要删除的信息!");
                }
                   
            }
            function getIndex()
            {
                intRowIndex = event.srcElement.parentElement.rowIndex;
                pos.innerText = intRowIndex;
            }

            function GetRowsCount() {
                var rows = myTable.rows.length;
                return rows;
            }

            function CalHours() {
                var hours = 0;
                for (var i = 1; i < myTable.rows.length; i++) {
                    hours += parseInt(myTable.rows[i].cells[0].innerText);
                }

                var txtHours = document.getElementById("txtHours");
                txtHours.innerHTML = hours;
            }

            function searchList() {
                var text;
                var date = document.all.txtDate.value;

                for (i = 1; i < myTable.rows.length; i++) {
                    text = myTable.rows(i).cells(0).innerText;

                    if (date == "" || date == text) {
                        myTable.rows(i).style.display = "";
                    }
                    else {
                        myTable.rows(i).style.display = "none";
                    }
                }
            }

        </script>
    </head>
    <body>
        <form name="myForm">
            <div style="margin:5px 0px 5px 30px;">
                <span style="padding-right:10px;">日期:</span>
                <input id="txtDate" type="text" style="80px;" />
                <input id="btnRefresh" type="button" value="刷新" onclick="searchList()" style="60px;" />
            </div>
           
            <div id="divList">
                <span id="pos" style="display:none;"></span>
                <table>
                    <tr>
                        <td style="text-align:right; padding-right:5px;"><span>投入工时:<span id="txtHours" style="color:Red;">0</span> H</span></td>
                    </tr>
                    <tr>
                        <td>
                            <table id="myTable" border="1">
                                <tr>
                                    <th>Num</th>
                                    <th>Text</th>
                                    <th>Value</th>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            第一栏:<input type="text" name="myCell1" value="CGI"><br>
            第二栏:<input type="text" name="myCell2" value="ASP"><br>
            <input type="button" onclick="insertRow(intRowIndex)" value="插入行">
            <input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
        </form>
    </body>
    </html>

  • 相关阅读:
    Luogu P3919【模板】可持久化数组(可持久化线段树/平衡树)
    线段树||BZOJ5194: [Usaco2018 Feb]Snow Boots||Luogu P4269 [USACO18FEB]Snow Boots G
    线段树||BZOJ1593: [Usaco2008 Feb]Hotel 旅馆||Luogu P2894 [USACO08FEB]酒店Hotel
    CF 610E. Alphabet Permutations
    BZOJ 1227: [SDOI2009]虔诚的墓主人
    BZOJ1009: [HNOI2008]GT考试
    BZOJ3674: 可持久化并查集加强版
    BZOJ3261: 最大异或和
    BZOJ2741: 【FOTILE模拟赛】L
    BZOJ3166: [Heoi2013]Alo
  • 原文地址:https://www.cnblogs.com/OSoft/p/2083447.html
Copyright © 2020-2023  润新知