`
kyokuryou
  • 浏览: 7866 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

JS插入行,删除行

jQueryJavaScriptAjaxHTML 
阅读更多 
<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>
 
分享到：
| 让IE支持getElementsByClassName
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics