jquery动态添加行, table checkbox全选

最新推荐文章于 2022-10-23 12:36:31 发布

anxingfeng4655

最新推荐文章于 2022-10-23 12:36:31 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/vsod/archive/2012/09/25/2701886.html

版权

jquery动态添加行及获取值

<head>
    <title>table动态添加行</title>
    <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
    <table id="table" border="0" style="text-align:center">
        <tr><td>id</td><td>one</td><td>two</td></tr>
        <tr class="tr">
            <td><input type="text" class="bianhao" value="1" disabled="disabled" style="width:15px;" /></td>
            <td><input type="text" class="one" /></td>
            <td><input type="text" class="two" /></td>
        </tr>
    </table>
    <input type="button" value="添加" οnclick="AddTr();" />  
    <input type="button" value="得到值" id="btnGetValue"/>
    <div id="ShowValue"></div>
<script type="text/javascript">
    function AddTr() {
        var i = $('#table tr:gt(0)').length;
        if (i >= 5) {
            alert('最多有5行');
            return;
        }
        var table = $('#table');
        var tr_1 = $('<tr class="tr"></tr>');
        var td_bianhao = $('<td><input type="text" class="bianhao" disabled="disabled" value="' + (i + 1) + '" style="width:15px;" /></td>');
        var td_one = $('<td><input type="text" class="one" /></td>');
        var td_two = $('<td><input type="text" class="two" /></td>');
        var td_delete = $('<td><a href="javascript:void(0);">删除</a></td>');
        td_delete.click(function () {
            if (confirm('是否删除')) {
                tr_1.remove();
            }
            $('.bianhao').each(function (i, item) {
                item.value = (i + 1);
            });
        });
        tr_1.append(td_bianhao);
        tr_1.append(td_one);
        tr_1.append(td_two);
        tr_1.append(td_delete);
        tr_1.appendTo(table);
    }

    function checkForm() {
        if (!isNullOne()) {
            alert('one列不能为空');
            return false;
        }
        if (!isNullTwo()) {
            alert('two为1到3位数字');
            return false;
        }
        var values = "";
        $('.tr').each(function (i, item) {
            var id = $(item).find(".bianhao").val();
            var one = $(item).find(".one").val();
            var two = $(item).find(".two").val();
            var str = id + "/" + one + "/" + two + ",<br/>";
            values += str;
        });
        $('#ShowValue').html(values);
    }

    function isNullOne() {
        var t = true;
        $('.one').each(function (i, item) {
            if ($(item).val() == "") {
                t = false;
            }
        });
        return t;
    }

    function isNullTwo() {
        var t = true;
        var reg = /^\d{1,3}$/;
        $('.two').each(function (i, item) {
            if (!reg.test($(item).val())) {
                t = false;
            }
        });
        return t;
    }

    $('#btnGetValue').click(function () {
        return checkForm();
    });
</script>
</body>

table 表里checkbox元素全选

<body>
    <table id="table" border="0">
        <tr><td colspan="2"><input type="checkbox" value="全选" οnclick="CheckAll('table',this)" /></td></tr>
        <tr><td><input type="checkbox" /></td><td>111</td></tr>
        <tr><td><input type="checkbox" /></td><td>222</td></tr>
        <tr><td><input type="checkbox" /></td><td>333</td></tr>
        <tr><td><input type="checkbox" /></td><td>444</td></tr>
        <tr><td><input type="checkbox" /></td><td>555</td></tr>
    </table>
<script type="text/javascript">
    function CheckAll(table, check) {
        $('#' + table + " :checkbox:gt(0)").each(function (i, item) {
            item.checked = check.checked;
        });
    }
</script>
</body>

如果有不懂的地方,请加群:217827517. 进行咨询.

转载于:https://www.cnblogs.com/vsod/archive/2012/09/25/2701886.html

anxingfeng4655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery动态添加行, table checkbox全选

jquery动态添加行及获取值<head> <title>table动态添加行</title> <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script></head><body> <ta...
复制链接

扫一扫