欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS插入行,删除行 博客分类: 日常累计 jQueryJavaScriptAjaxHTML 

程序员文章站 2024-03-21 20:51:34
...
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="./script/jquery-1.5.min.js"></script>
    <script type="text/javascript">
        var mainTable = "PowerTable";
        $(document).ready(function () {
            checkboxState();
            delButtonState();
            delButtonState();
            $("#addRow").click(function () {
                var randString = getRand();
                var htmlText = "<tr id='" + randString + "'>";
                htmlText += "<td width='10'><input class='checkbox' type='checkbox' alt='" + randString + "'/></td>";
                htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
                htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
                htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
                htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
                htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
                htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
                htmlText += "</tr>";
                $("#" + mainTable).append(htmlText);
                checkboxState();
            });
            $("#delRow").click(function () {
                $(".checkbox").each(function () {
                    var findT = $(this).attr("alt").substr(0, 1);
                    if ($(this).attr("checked")) {
                        if (findT == "T") {
                            $("#" + $(this).attr("alt")).remove();
                        } else {
                            alert("ajax");
                        }
                        $("#checkbox").attr("checked", false);
                    }
                });
                checkboxState();
                delButtonState();
            });

            $("tr td").live("keydown", function () {

            });

            $("#checkbox").click(function () {
                checkboxState();
                $(".checkbox").attr("checked", $(this).attr("checked"));
                delButtonState();
            });

            $(".checkbox").live("click", function () {
                if ($(this).attr("checked")) {
                    $("#delRow").attr("disabled", false);
                } else {
                    delButtonState();
                }
            });
        });
        function delButtonState() {
            $("#delRow").attr("disabled", true);
            var checkboxArr = $(".checkbox");
            for (var i = 0; i < checkboxArr.length; i++) {
                if ($(checkboxArr[i]).attr("checked")) {
                    $("#delRow").attr("disabled", false);
                    break;
                }
            }
        }
        function checkboxState() {
            if ($(".checkbox").length > 0) {
                $("#checkbox").attr("disabled", false);
            } else {
                $("#checkbox").attr("disabled", true);
                $("#checkbox").attr("checked", false);
            }
        }
        function getRand() {
            var randString = "T";
            var dateRand = new Date();
            randString += dateRand.getFullYear();
            randString += dateRand.getMonth() + 1;
            randString += dateRand.getDate();
            randString += dateRand.getHours();
            randString += dateRand.getMinutes();
            randString += dateRand.getSeconds();
            randString += dateRand.getMilliseconds();
            return randString;
        }
    </script>
</head>
<body>
<table width="100%" border="1" cellSpacing="0" cellPadding="2" id="PowerTable">
    <tr align="middle" bgColor="#ffcc00">
        <th width=10>
            <input id="checkbox" type="checkbox"/>
        </th>
        <th>
            票证名称
        </th>
        <th>
            领取数量
        </th>
        <th>
            字轨
        </th>
        <th>
            起始号码
        </th>
        <th>
            终止号码
        </th>
        <th>
            备注
        </th>
    </tr>
    <tr id="201131516146490">
        <td width="10"><input class="checkbox" alt="201131516146490" type="checkbox"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
    </tr>
    <tr id="201131516147235">
        <td width="10"><input class="checkbox" alt="201131516147235" type="checkbox"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
    </tr>
    <tr id="201131516147863">
        <td width="10"><input class="checkbox" alt="201131516147863" type="checkbox"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
    </tr>
    <tr id="201131516148516">
        <td width="10"><input class="checkbox" alt="201131516148516" type="checkbox"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
        <td><input size="100" style="width: 50%;" type="text"></td>
    </tr>
</table>
<input type="button" value="新增行" id="addRow">
<input type="button" value="删除行" id="delRow">
</body>
</html>