首页 > 技术文章 > JavaScript--遍历table中的tr存对象

dcy521 2019-08-23 08:25 原文

主要实现功能为:将table中每一个tr中的数据存为一个对象,再将对象分别存到数组中,这是在做项目时候遇到的问题,每一个tr就代表一个表的一条数据,多个tr就是多条数据,需要传到后端,逐条添加,在网上看其他博客都是直接遍历所有td,所以自己又搞了一下,总结一下

HTML代码:

<div align="center">
            <table id="tab1" border="1" align="center">
                <tbody>
                    <tr>
                        <td><input type="text" value="001" id="001" /></td>
                        <td><input type="text" value="002" id="002" /></td>
                    </tr>

                    <tr>
                        <td><input type="text" value="003" id="003" /></td>
                        <td><input type="text" value="004" id="004" />
                        <td class="a"><input type="submit" value="提交" /> </td>
                    </tr>
                </tbody>
            </table>
            <br>
            <button id="btntb">table1</button>
            <button id="btntb2">table2</button>
        </div>

Js实现:

/*Js实现*/
        $('#btntb').click(function() {

            let arr = new Array();

            let lists = $('#tab1 tr');
            for (let i = 0; i < lists.length; i++) {
                let obj = {

                }
                let newlist = lists.eq(i).find('td').not('.a');
                for (let j = 0; j < newlist.length; j++) {
                    let va = newlist.eq(j).find('input').val();
                    let id = newlist.eq(j).find('input').attr('id')
                    obj[id] = va;
                }
                arr.push(obj);

            }
            console.log(arr);
        });

JQuery实现:

$('#btntb2').click(function() {
            let arr = new Array();
            $("#tab1").find("tr").each(function() {
                let obj = {

                }
                var tdArr = $(this).children().not('.a')
                $.each(tdArr, function() {
                    let va = $(this).find('input').val()
                    let id = $(this).find('input').attr("id")
                    obj[id] = va;
                })
                arr.push(obj);
            });
            console.log(arr);
        });

 

推荐阅读