I have the following table definition :

  <table id = "domaintable">

      <thead>

        <tr>

        <th scope="col">&nbsp;</th>  

            <th scope="col"> </th>

            <th scope="col">Domain Name</th>

        </thead>

        </tr>                         

    <tr id = "row1">

      <td id =><input type  = "checkbox" id = "domaincheck" data-domain-row="1" ></td>

      <td   align = "center" id = "domainID:1">1</td>

      <td align = "center" id = "domainname1"><input type = "text" name ="domainname" data-domainname-row= "1"></td>

    </tr>



    <tr id = "row2" style="display:none;">

        <td id =><input type    = "checkbox" id = "domaincheck" data-domain-row="2" ></td>

        <td   align = "center" id   = "domainID:2">2</td>

        <td align = "center" id = "domainname2"><input type = "text" name ="domainname" data-domainname-row= "2"></td>

      </tr>



      <tr id = "row3" style="display:none;">

        <td id =><input type    = "checkbox" id = "domaincheck" data-domain-row="3" ></td>

        <td   align = "center" id   = "domainID:3">3</td>

        <td align = "center" id = "domainname3"><input type = "text" name ="domainname" data-domainname-row= "3"></td>

      </tr>



      <tr id = "row3" style="display:none;">

          <td id =><input type  = "checkbox" id = "domaincheck" data-domain-row="3" ></td>

          <td   align = "center" id = "domainID:3">3</td>

          <td align = "center" id = "domainname3"><input type = "text" name ="domainname" data-domainname-row= "3"></td>

        </tr>





        <tr id = "row4" style="display:none;">

            <td id =><input type    = "checkbox" id = "domaincheck" data-domain-row="4" ></td>

            <td   align = "center" id   = "domainID:4">4</td>

            <td align = "center" id = "domainname4"><input type = "text" name ="domainname" data-domainname-row= "4"></td>

          </tr>

          <tr id = "row5" style="display:none;">

              <td id =><input type  = "checkbox" id = "domaincheck" data-domain-row="5" ></td>

              <td   align = "center" id = "domainID:5">5</td>

              <td align = "center" id = "domainname5"><input type = "text" name ="domainname" data-domainname-row= "5"></td>

            </tr>



            <tr id = "row6" style="display:none;">

                <td id =><input type    = "checkbox" id = "domaincheck" data-domain-row="6" ></td>

                <td   align = "center" id   = "domainID:6">6</td>

                <td align = "center" id = "domainname6"><input type = "text" name ="domainname" data-domainname-row= "6"></td>

              </tr>

    </table>

The above table has style set as "display:none" so that when not all rows are displayed at once and visibility is set only when user clicks on add row button which is working correctly with out any issues
I am using the following code to retrieve value entered in the table for each row :

var domaincount = $('#domaintable tr:visible').length-1; 

console.log(domaincount);

var domainnamehtml = $('[name = "domainname"]');         

console.log(domainnamehtml);

var domainnametable = ;

for (var i=0;i<domaincount;i++){

    console.log(domainnamehtml[i].value);

    if(domainnamehtml[i].value)

        domainnametable[i] = domainnamehtml[i].value;

    else

        domainnametable[i] = "blank";

 }

On executing the above code I find that the value entered in the 3rd or 4th row is set to blank even there is an input from the user on the same row. I even tried accessing the value on the page using the console debugger , but the value is set as blank.
Need help to understand what am I doing wrong here.

:visible vs. jQuery Object (or Collection)

"On executing the above code I find that the value entered in the 3rd or 4th row is set to blank even there is an input from the user on the same row. I even tried accessing the value on the page using the console debugger , but the value is set as blank."

Situation

• Let's say that you have 6 rows.


• The user hides the first 3 rows.


• You want the value of the inputs in the remaining 3 rows.

Using the OP (Original Post)^✱ code:

var visibleIndex = $('#domaintable tr:visible').length-1; 

That's an index of 2 for the loop that should cover 3 loops, that's logical.

var names = $(`[name="domainName"]`);  

Next is a jQuery Object of all tags with the name of domainName. That's 6 inputs visible and hidden because a jQuery Collection (or Object) counts everything. So now going through the loop you'll get the values of the 3 hidden inputs and it stops after that.

^{✱The names have been modified for my sanity -- domainthis and domainthat begin to look simply like domain.}

Solutions

A quick fix is to change line 2:

var names = $(`[name="domainName:visible"]`);  

The following demo has a generic function for easy reuse, it uses .each() method which is superior to a for loop, details are commented in demo. Also, the markup is a good example of proper HTML formatting. In addition, id="checkDomain" is invalid -- all ids must be unique -- so it has been changed to class="checkDomain". Once you get used to using jQuery, using class becomes very simple and using id becomes a hindrance.

Demo

/* | Row | Pick one for ROW parameter */

// Results will be different

var vis = `#domains tbody tr:visible`;

var inv = `#domains tbody tr:hidden`;

var all = `#domains tbody tr`;



/* | jQuery Object | Pick one for jQObj parameter */

// They are different ways to access the same input

var name = '[name="domainName"]';

var data = '[data-domain]';

var type = ':text';



// Keep track of lines logged with a counter

var counter = 1;



/* Pass in a selector for rows and input */

function trLoop(ROW, jQObj) {

  

  // Log a line and increment counter

  console.log(`${counter++} ================`);

  

  // .each() runs a function on each row

  $(ROW).each(function() {

    

    /* Get the current row ---- $(this)

    ** Find the text input ---- .find(jQObj)

    ** Get that input's value - .val()

    */    

    var result = $(this).find(jQObj).val();  

    

    // If there's no value log: "Blank"...

    if (!result) {

      console.log('Blank');

    

    // ...otherwise log the value

    } else {

      console.log(result);

    }

  });

  // Log a line after the last loop

  console.log(`==================`);

}



/* For demo purposes */

$('#add').on('click', function(e) {

  var count = Number($('[data-row]:last').data('row'))+1;

  $('#domains tbody').append(`<tr id="row${count}" class='show'>

          <td><input class="domainCheck" data-row="${count}" type="checkbox"></td>

          <td>${count}</td>

          <td><input data-domain="${count}" name="domainName" type="text"  value=''></td>

          <td><button type='button'>Hide</button></td>

        </tr>`);

});



/* For demo purposes */

$('#domains tbody').on('click', 'button', function(e) {

  $(this).closest('tr').hide();

});



/* For demo purposes */

$(':radio:eq(0)').on('click', function(e) {trLoop(vis, name)});

$(':radio:eq(1)').on('click', function(e) {trLoop(inv, data)});

$(':radio:eq(2)').on('click', function(e) {trLoop(all, type)});

/* All styles are for demo purposes*/

body {

  font: 400 16px Consolas

}



fieldset {

  width: 20%;

  float:left;

}



#domains {

  width: 25%;

  margin: 0 10px;

  float:left;

}



label {

  display: inline-block;

  width: 10ch;

}



input, button {

  display: inline-block;

  line-height: 25px;

  height: 25px;

  vertical-align: middle;

  text-align:center;

  font: inherit;

}



button {

  width: 8ch;

}



.as-console-wrapper.as-console-wrapper {

  width: 25%;

  min-height: 100%;

  transform:translateX(300%);

}



.as-console-row.as-console-row::after {

  content:'';

  padding:0;

  margin:0;

  border:0;

  width:0;

}

<!DOCTYPE html>

<html>

<head>

   <meta charset='utf-8'>

   <title></title>

   <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">

   <style></style>

</head>



<body>

<!--fieldset for demo purposes-->

   <fieldset>

     <legend>Rows</legend>

     <label>Visible: </label> 

     <input type='radio' name='row'><br>

     <label>Invisible: </label>

     <input type='radio' name='row'><br>

     <label>All: </label>

     <input type='radio' name='row'>

   </fieldset>

   

  <table id='domains'>

      <thead>

        <tr>

          <th scope="col"></th>

          <th scope="col"></th>

          <th scope="col">Domain Name</th>

          <th scope='col'>            

            <button id='add' type='button'>Add</button>

          </th>

        </tr>

      </thead>

      <tbody>

        <tr id="row1">

          <td><input class="domainCheck" data-row="1" type="checkbox" checked></td>

          <td>1</td>

          <td><input data-domain="1" name="domainName" type="text"  value='cdnjs.com'></td>

          <td><button type='button'>Hide</button></td>

        </tr>

        <tr id="row2">

          <td><input class="domainCheck" data-row="2" type="checkbox" checked></td>

          <td>2</td>

          <td><input data-domain="2" name="domainName" type="text" value='stackoverflow.com'></td>

          <td><button type='button'>Hide</button></td>

        </tr>

        <tr id="row3">

          <td><input class="domainCheck" data-row="3" type="checkbox"></td>

          <td>3</td>

          <td><input data-domain="3" name="domainName" type="text" value=''></td>

          <td><button type='button'>Hide</button></td>

        </tr>

        <tr id="row4">

          <td><input class="domainCheck" data-row="4" type="checkbox"></td>

          <td>4</td>

          <td><input data-domain="4" name="domainName" type="text" value=''></td>

          <td><button type='button'>Hide</button></td>

        </tr>

        <tr id="row5">

          <td><input class="domainCheck" data-row="5" type="checkbox" checked></td>

          <td>5</td>

          <td><input data-domain="5" name="domainName" type="text" value='google.com'></td>

          <td><button type='button'>Hide</button></td>

        </tr>

      </tbody>

   </table>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>