JQuery - Find textbox values โ€‹โ€‹in table through $ .each loop

I have one HTML table ... This first row of HTML table is static, when they click one (+) button, rows are added dynamically, user wants to delete one row, he click one (-) means the current row is deleted.

Each line contains 4 text boxes. My JQuery code is below ..

var FirstName;
var LastName;
var Email;
var PhoneNumber;
 $("#tableId tr").find('fieldset').each(function (i) { 
                    FirstName =FirstName +','+ $("#txtFirstName" + (i + 1) + "").val();
                    LastName =LastName +','+ $("#txtLastName" + (i + 1) + "").val();
                    Email =Email +','+ $("#txtEmail" + (i + 1) + "").val();
                    PhoneNumber = PhoneNumber+','+ $("#txtPhoneNumber" + (i + 1) + "").val();


I am setting the id of the textboxes dynamically, its working, but when the user deletes one line, I cannot get the value of the textboxes based on the Id.

How do I get the values โ€‹โ€‹of text boxes?


source to share

6 answers

I am using an index to access four text fields. Also added $ fieldset parameter as context.

$("#tableId").find('tr fieldset').each(function (i) { 
    var $fieldset = $(this);
    FirstName =FirstName +','+ $('input:text:eq(0)', $fieldset).val();
    LastName =LastName +','+ $('input:text:eq(1)', $fieldset).val();
    Email =Email +','+ $('input:text:eq(2)', $fieldset).val();
    PhoneNumber = PhoneNumber+','+ $('input:text:eq(3)', $fieldset).val();




Assuming your table looks something like this:

            <input type="text" class="firstName" value="foo1">
            <input type="text" class="lastName" value="ba1r">
            <input type="text" class="firstName" value="foo2">
            <input type="text" class="lastName" value="bar2">


here's a snippet that might work (it might need to be modified to suit your needs)

$(function() {

    var data = {
        firstName : [], lastName : []

    //loop through the tr's
    $('table tr').each(function() {

        //look for the fields firstName and lastName in the tr
        //get their values and push into storage        
        data.firstName.push($('.firstName', this).val());
        data.lastName.push($('.lastName', this).val());

    //view the data in the console

    //if you prefer the comma separated data
    var firstName = data.firstName.join(',');
    var lastName = data.lastName.join(',');




try to get the value using this






inside the loop will give you a handle to the current element



You can use a selector like:



Or apply specific class

to the textboxes

one you want and search.



The ideal solution for this is to let you get rows by id, even if the row is deleted. Do this by updating the row id every time a row is deleted.



All Articles