• JavaScript--遍历table中的tr存对象


    主要实现功能为:将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);
            });
  • 相关阅读:
    校园导游图的课程设计(三)
    校园导游图的课程设计(二)
    vim中Mapping already in use: "<LocalLeader>is", mode "n"错误解决的方法解释
    fedora 的截图快捷键
    校园导游图的课程设计(一)
    theos(一)
    脱壳
    初识Mach-O
    Cycript(二)
    Cycript(一)
  • 原文地址:https://www.cnblogs.com/dcy521/p/11397838.html
Copyright © 2020-2023  润新知