table 添加行删除行然后取所有行的值

最新推荐文章于 2022-05-23 10:03:37 发布

qq_39087348

最新推荐文章于 2022-05-23 10:03:37 发布

阅读量99

点赞数

分类专栏：前端文章标签： HTML JavaScript 表单动态增删数据获取

本文链接：https://blog.csdn.net/qq_39087348/article/details/117218734

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

table的代码

    <table class="table table-bordered table-data" id="jtcyTbale">
        <thead>
        <tr>
            <th colspan="11" style="text-align: center">家庭成员
                <button class="btn btn-success" id="jtcytj"  type="button">
                    <i class="fa fa-plus"></i> 添加
                </button>
            </th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>关系</th>
            <th>身份证号</th>
            <th>户籍性质</th>
            <th>职业状态</th>
            <th>婚姻情况</th>
            <th>联系方式</th>
            <th>保障状态</th>
            <th>产权人</th>
            <th style="width: 100px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input style="width: 80%" name="name"/></td>
            <td><input style="width: 80%" name="sex"/></td>
            <td><input style="width: 80%" name="guanXi"/></td>
            <td><input style="width: 80%" name="idNum"/></td>
            <td><input style="width: 80%" name="hj"/></td>
            <td><input style="width: 80%" name="job"/></td>
            <td><input style="width: 80%" name="marriage"/></td>
            <td><input style="width: 80%" name="tel"/></td>
            <td><input style="width: 80%" name="bzzt"/></td>
            <td><input style="width: 80%" name="cqr"/></td>
            <td><button class='deleteH' type='button' >删除</button></td>
        </tr>
        </tbody>
    </table>


                //添加行
                $('#jtcytj').on('click',function () {
                    $("#jtcyTbale").append("<tr>\n" +
                        "            <td><input style=\"width: 80%\" name=\"name\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"sex\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"guanXi\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"idNum\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"hj\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"job\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"marriage\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"tel\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"bzzt\"/></td>\n" +
                        "            <td><input style=\"width: 80%\" name=\"cqr\"/></td>\n" +
                        "            <td><button class='deleteH' type='button' >删除</button></td>\n" +
                        "        </tr>")
                })
                
                //删除行
                $('#jtcyTbale').on('click','.deleteH',function () {
                    $(this).closest('tr').remove();
                })

                //取所有行的值
                let datas = [];
                $("#jtcyTbale tbody tr").each((i, o) => {
                    let row = {}
                    datas.push(row)
                    $(o).find("input").each((i, ip) => {
                        let obj = $(ip)
                        row[obj.attr('name')] = obj.val()
                    })
                })
                console.log(datas)