如何使用jQuery獲取表格中所有行的元素ID

我的表格ID是「termTable」。我遍歷表的每一行。由於我用循環來隨機生成ID，文本框的ID是「label」+ i +'「。可能在添加行或刪除行之後，i的值將變爲無序。例如：ID是label1，label2，label3。刪除第二行後，我添加了另一行。所以現在ID是label1，label3，label4。我想檢索所有文本框元素的所有id。我怎樣才能實現它？請幫忙。如何使用jQuery獲取表格中所有行的元素ID

for (var i = 0; i < firstTabLength; i++) { 
    var row = $("#termTable tr").eq(i); 
    var id = row.find('input[type="text"]').attr('id'); // I could see id = undefined    
}

這是HTML。這是爲了將新行添加到表中。猜猜你可以通過下面的代碼可視化表結構。

function AddCustomTerm1() { 
    len = len + 1; 
    var table = document.getElementById("termTable"); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    row.insertCell(0).innerHTML = '<input type="text" class="form-control" id="label' + (len - 1) + '" name="label' + (len - 1) + '" value=""><input type="hidden" id="step' + (len - 1) + '" value="1"/>'; 
    row.insertCell(1).innerHTML = '<select class="form-control" id="dataTypes' + (len - 1) + '" name="dataTypes' + (len - 1) + '" onchange="changeDataType(this)"></select>' 
    row.insertCell(2).innerHTML = '<input type="text" class="form-control" id="ContractTerm' + (len - 1) + '" name="ContractTerm' + (len - 1) + '" value="">'; 

    var DD = document.getElementById("dataTypes" + (len - 1)); 

    for (var i = 0; i < datatypesarray.length; i++) { 
     var opt = document.createElement("option"); 
     opt.text = datatypesarray[i]; 
     opt.value = datatypesarray[i]; 
     DD.appendChild(opt); 
    }

來源

2016-02-27 P Sriharsha

firstTabLength是表中的行數 –

向我們展示您的html！ –

沒有你的HTML格式不能幫助很大。

但試試這些。你甚至不需要一個for循環來獲取表中的所有文本框和它們的ID。

var ids=[]; 
    $('#termTable input[type="text"]').each(function(){ 
     ids.push($(this).attr('id')) 
    })

，如果你想在table.the的第一列中的文本框的IDS試試這個

var ids=[]; 
     $('#termTable tr').each(function(){ 
      ids.push($(this).find('td:first-child input[type="text"]').attr('id')) 
     })

來源

2016-02-27 08:05:48

非常感謝。完美運作。 –

很高興它幫助你@PSriharsha。 –

既然你有一個以上的input[type="text"]成一排，你應該拿第一。您也可以使用each()而不是for。

$('#termTable tr').each(function() { 
    var id = $(this).find('input[type="text"]:first').attr('id'); 
    console.log(id); 
});

來源

2016-02-27 08:12:38 Azim

通過使用$('#termTable input')並遍歷所有使用$.each API

使用如下代碼下面所選擇的元素找到表內的所有輸入單元。

var InputIds = []; //array to hold your id's 
$.each($('#termTabel input[type="text"]'),function(i,v){ 
    InputIds.push($(this).attr('id')); 
}); 
console.log(InputIds.toString());

來源

2016-02-27 08:17:16

//this finds all inputs which id start from "label" 
$('#termTable input[id^="label"]').each(function(){ console.log(this.id); });

例如：https://jsbin.com/lisuratere/edit?html,js,output

來源

2016-02-27 08:27:06

最好的做法是一個特定的類添加到您的所有要素需要進行反覆的。

例如類term-table-input添加到您的輸入：

row.insertCell(0).innerHTML = '<input type="text" class="form-control term-table-input" id="label' + (len - 1) + '" name="label' + (len - 1) + '" value=""><input type="hidden" id="step' + (len - 1) + '" value="1"/>';

而且隨着迭代他們：

var termTableInputIDs = []; 

$('.term-table-input').each(function() { 
    termTableInputIDs.push($(this).attr('id')); 
});

你也可以在此處詳細瞭解編寫有效的CSS： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

來源

2016-02-27 08:40:40

如何使用jQuery獲取表格中所有行的元素ID

回答

相關問題