js獲取表格動態添加行的數據

問題:動態添加table行所定義的id值重複問題

解決思路:定義name代替定義id,循環遍歷行數組拿取每行數據

<table id="table">

     <tr><input name="name1" value="a">&nbsp;&nbsp;<input name="name2" value="aa"></tr>

     <tr><input name="name1" value="b">&nbsp;&nbsp;<input name="name2" value="bb"></tr>

</table>

//獲取table下的所有tr組成行數組
var trs = $("#table tr");

//獲取tr數組長度
var number = trs.length;

//定義數據,組裝數據
var testList = new Array();

//循環遍歷拿取table的每一行數據
for(var i=0;i<number;i++){
    var tr = trs[i];
    
    //find 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素。
    
    //獲取每一行下面input的name='name1',name='name2'的數據
    var testValue1 = $(tr).find("input[name='name1']").val();

    var testValue2 = $(tr).find("input[name='name2']").val();
    
    //其他html元素數據獲取方法一樣
    
    //var $(tr).find("input[type='checkbox']").is(':checked')//判斷每一行的checkbox是否被選中true/false

    var parms = {
            "testName1": testValue1 ,
            "testName2": testValue2
        };
        
        testList .push(parms);
    
}


//數據組裝結果
//每個對象代表該table的每一行數據
testList=[
            {
                "testName1":"a",
                "testName2":"aa",
            },
            {
                "testName1":"b",
                "testName2":"bb",
            }
        ]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章