zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Hive、Presto、Kylin、Impala、Sparksql、Druid 区别
    HIVE vs HBASE
    mysql vs mongodb
    关于MCU 开门狗要求
    JAVA转OC j2objc
    DTD文件映射
    装饰者模式(Decorator)
    Spring Boot 概述
    C语言也会短路?盘点C语言中那些令人匪夷所思的情况!
    程序员的天梯排行榜!你的理想高度在哪里?
  • 原文地址:https://www.cnblogs.com/OSoft/p/2083447.html
Copyright © 2011-2022 走看看