How to get id of a element in all the rows of a table using jQuery

Question

My table id is "termTable". I am iterating through each row of the table. The id of textbox is "label'+ i +'" since I used for loop to generate ids randomly. The values of i will be unordered maybe after adding the rows or deleting the rows. Example: IDs are label1, label2, label3. After deleting the 2nd row, I am adding another row. So now the IDs are label1,label3, label4. I want to retrieve all the ids of all the textbox elements. How can I achieve it? Please help.

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             
}

This is Html. This is for adding the new rows to table. Guess you can visualize the table structure with the help of below code.

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

Answer 1

without you html format cant help much.

but try this ones.you dont even need a for loop to get all the textbox and their ids from table.

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

if you want ids of the textboxes in first column of the table.the try this

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

Answer 2

The best practice is to add a specific class to all of your elements that need to be iterated.

For example add the class term-table-input to your inputs:

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"/>';

And iterate them with:

var termTableInputIDs = [];

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

Also you could read more about writing efficient css here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

Answer 3

Since you have more than one input[type="text"] in a row, you should take the first. Also you can use each() instead of for .

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

Answer 4

You find all the input elements inside the table by using $('#termTable input') and to loop through all the selected elements you use $.each API

Use Code like below.

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

Answer 5

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

example: https://jsbin.com/lisuratere/edit?html,js,output