Jquery实现table表格行的添加、删除

更多时间：2015-11-20 类别：Web前端浏览量：210

Jquery实现table表格行的添加、删除

Jquery实现table表格行的添加、删除

一、效果图

二、实现代码

HTML 代码复制



<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">...

        $("document").ready(function()...{
            // 全部选择的点击事件
            $("input[name='chkall']").click(function()...{
                $("input[name='chked']").attr("checked", this.checked);
            });
        });

        var row_cur_index = 0;// 插入行的当前索引

        /**//**添加新行*/
        function addNew()...{
            var row_id = "tr" + row_cur_index;// 所插入行的id
            var row_obj = "<tr id='"+row_id+"'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow"+row_cur_index+"' />&nbsp;<a href='#' onclick='delRow("+row_id+")'>删除</a></td></tr>";
            $("#topRow").before(row_obj); // 插入行
            row_cur_index = row_cur_index + 1;
        }
        
        /**//**将文本框值赋给同一行对应的复选框*/
        function setValue(row_index, value)...{
            var row_id = "#tr" + row_index;
            $(row_id).find(":checked").val(value);
        }
        
        /**//**删除行对象*/
        function delRow(row_id)...{
            $(row_id).remove(); // 删除匹配row_id的元素
        }

        function doSubmit(frm)...{
            /**//**判断复选框是否有选*/
            if($("input[name='chked']:checked").size() == 0)...{
                alert("选择不能少于一项");
                return false;
            }
            try ...{
                $("tr[id^='tr']").each(function()...{
                    var tmp_row_index = this.id.substring(2); // 当前行索引
                    if($("#tr"+tmp_row_index).find(":checkbox").attr("checked"))...{
                        var patrn = /^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/;
                        var input_value = $("input[name='newRow"+tmp_row_index+"']").val(); // 文本框值 
                        setValue(tmp_row_index, this.value);        
                        if(input_value == "") throw "Err1";
                        if (!patrn.test(input_value)) throw "Err2";
                    }
                });
            } catch (e) ...{
                 if(e == "Err1") 
                    alert("添加的地址不能为空！");
                if(e == "Err2") 
                    alert("请输入正确的邮件地址！");             
                 return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form method="post" action="" onsubmit="return doSubmit(this)">
        <table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
            <tr>
                <td><input type="checkbox" name='chkall' />全部选择</td>
                <td>
                                        <a href="#" onclick="addNew()">添加新地址</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="chked" value="@email">
                </td>
                <td>@email</td>
            </tr>
            <tr id="topRow">
                <td colspan="2">
                    <input type="submit" value="提交" name="B1">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

标签：table

上一篇：web.config里面使用configSource

下一篇：MySql存储过程

您可能感兴趣

Jquery实现table表格行的添加、删除

Jquery实现table表格行的添加、删除

热门推荐

排行榜