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);
        });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM