jquery实现表格行与列的动态增加和删除

jquery实现表格行与列的动态增加和删除

实现动态增加 删除最后一行与最后一列,获取表格内填写的input数据。

具体功能都已经添加按钮到页面上显示

HTML代码

<input type="button" id="addrow" value="增加一行">
<input type="button" id="detrow" value="删除一行">
<input type="button" id="addcol" value="增加一列">
<input type="button" id="detcol" value="删除一列">
<input type="button" id="getstr" value="获取内容">
<input type="button" id="getstrJson" value="获取json">

<p> </p>

<table id="table">
    <tbody>
        <tr>
            <td><span>0</span>至<input value="10" style="width:50%"></td>
            <td><input value="20"></td>
            <td><input value="30"></td>
            <td><input value="40"></td>
        </tr>
    </tbody>
</table>

CSS代码

* {
    margin: 0;
    padding: 0;
    border: 0;
}

table {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
}

table tr td {
    border: 2px solid rosybrown;
    height: 32px;
}

table tr td input {
    width: 100%;
    height: 100%;
}

#addrow,#detrow,#addcol,#detcol,#getstr,#getstrJson {
    display: block;
    line-height: 40px;
    font-family: "Arial Black";
    background: #808000;
    width: 100px;
    margin: 20px auto;
    margin-left: 20px;
    border: 2px solid black;
    box-shadow: 3px 3px 5px #b9b9b9;
    float: left;
}

jquery代码

$(document).ready(function() {
    //增加一行
    $("#addrow").click(function() {
        var tdAmt = $("tbody tr:last-child input").val();
        if (tdAmt != '') {
            //克隆上一行
            $("tbody tr:last-child").clone().appendTo("#table tbody");
            //将上一行区间数据赋值
            $("#table tbody tr:last").find("span").html(tdAmt);
            //将行尾克隆的值清空
            $("#table tbody tr:last").find(":input").val('');
        } else {
            alert("上一行区间金额不允许空");
        }


    });
    //删除一行
    $("#detrow").click(function() {
        var index = $("#table tr:last-child").index();
        if (index > 0) {
            $("#table tr:last-child").remove();
        } else {
            alert("表格第一行不能删除!");
            return false;
        }
    });
    //增加一列
    $("#addcol").click(function() {
        var tr = $("#table tr"); //所有tr元素
        tr.each(function(index) {
            $(this).append("<td><input /></td>")
        })
    });
    //删除一列
    $("#detcol").click(function() {
        var colTable = $("#table").find("tr");
        var trLen = colTable.eq(0).find("td").length; //列数
        colTable.each(function(i) {
            if (trLen > 1) {
                colTable.eq(i).find("td").eq(0).remove();
            } else {
                alert("表格第一列不能删除!");
                return false;
            }
        });
    });
    //获取字符串内容
    $("#getstr").click(function() {
        var str = "";
        var trLen = $("#table tbody tr").length;
        for (var i = 0; i < trLen; i++) {
            var tr = $("#table tbody").find("tr").eq(i); //获取每一行tr
            var tdLen = $(tr).find("td").length;
            for (var j = 0; j < tdLen; j++) {
                td = $(tr).find("td input").eq(j); //获取每行td
                var dir = $(tr).find("input").eq(j).val();
                str = str + dir + ","
            }
            str = str + "|" //换行
        }
        alert(str);
    });
    //获取Json内容
    $("#getstrJson").click(function() {
        var jsonStr = "{[";
        $('#table tbody').find('tr').each(function(id) {
            jsonStr += "{";
            $(this).find('td').each(function() {
                $(this).find('input').each(function() { //获取td中input的值
                    jsonStr += "\"td" + id + "\":\"" + $(this).val() + "\",";
                })
            })
            jsonStr = jsonStr.substring(0, jsonStr.length);
            jsonStr += "},";
        })
        jsonStr = jsonStr.substring(0, jsonStr.length);
        jsonStr += "]}";
        alert(jsonStr);
    });
    //监控第一列input值变化
});

 

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » jquery实现表格行与列的动态增加和删除

发表评论

提供最优质的资源集合

立即查看 了解详情