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>