Iterating table cells using jquery

Question

I have a HTML table where I need to get the values of all the rows of a table, within each table there exist cells with different classes.

• The first one contains a checkbox, when selected it must return true else false

• The second is a inner text itself

• The third column needs a number to be fetched from input type=number
• The fourth is a text from textbox
• The last 2 are the dates which should be the inner text itself.

The expected result is

[
[false,"A text",12,"textboxvalueifpresent","2019-07-17T14:08:38.911Z","2019-07-04T12:00:00.000Z"],
[true,"B text",88,"","2019-07-17T14:08:38.913Z","2019-07-04T12:00:00.000Z"],
[false,"C text",24,"","2019-07-17T14:08:38.913Z","2019-07-04T12:00:00.000Z"]
]

I have tried with for each of Jquery

 var items = []; $("#tab1 tr").each(function() { items.push([$(this).find("input.checkbox").val(), $(this).find("input.material").val(), $(this).find("input.consign").val(), $(this).find("input.name").val(), $(this).find("input.dc").val(), $(this).find("input.do").val(), ]); }); 

 <table id="tab1" style="padding: 5px;width: 100%"> <tr id="tr1"> <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb1"></td> <td style="width:30%;"><span style="width:100%;" class="input material" id="ma1">A text</span></td> <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co1" value="12" placeholder="Consign"></td> <td style="width:30%;"><input style="width:90%;" class="input name" id="na1" value="" placeholder="Name"></td> <td style="width:15%;"><span class="input dr" id="dr1">2019-07-17T14:08:38.911Z</span></td> <td style="width:15%;"><span class="input do" id="do1">2019-07-04T12:00:00.000Z</span></td> </tr> <tr id="tr2"> <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb2"></td> <td style="width:30%;"><span style="width:100%;" class="input material" id="ma2">B text</span></td> <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co2" value="88" placeholder="Consign"></td> <td style="width:30%;"><input style="width:90%;" class="input name" id="na2" value="" placeholder="Name"></td> <td style="width:15%;"><span class="input dr" id="dr2">2019-07-17T14:08:38.913Z</span></td> <td style="width:15%;"><span class="input do" id="do2">2019-07-04T12:00:00.000Z</span></td> </tr> <tr id="tr3"> <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb3"></td> <td style="width:30%;"><span style="width:100%;" class="input material" id="ma3">C text</span></td> <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co3" value="24" placeholder="Consign"></td> <td style="width:30%;"><input style="width:90%;" class="input name" id="na3" value="" placeholder="Name"></td> <td style="width:15%;"><span class="input dr" id="dr3">2019-07-17T14:08:38.913Z</span></td> <td style="width:15%;"><span class="input do" id="do3">2019-07-04T12:00:00.000Z</span></td> </tr> </table> 

Answer 1

The value of a checkbox is whatever is in it's value attribute, it doesn't matter whether it's checked. You can use .prop("checked") or .is(":checked") to tell whether it's checked.

Your checkboxes don't have class="checkbox", so .input.checkbox won't work. I changed it to won't work. I changed it to .input:checkbox`.

Spans will not be selected with input selectors, and you get the text with .text() , not .val() .

You don't have class="dc" in the fifth column, it's class="dr" .

 $("#button").click(function() { var items = []; $("#tab1 tr").each(function() { items.push([ $(this).find("input:checkbox").prop("checked"), $(this).find("span.material").text(), $(this).find("input.consign").val(), $(this).find("input.name").val(), $(this).find("span.dr").text(), $(this).find("span.do").text(), ]); }); $("#output").text(JSON.stringify(items, null, 2)); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tab1" style="padding: 5px;width: 100%"> <tr id="tr1"> <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb1"></td> <td style="width:30%;"><span style="width:100%;" class="input material" id="ma1">A text</span></td> <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co1" value="12" placeholder="Consign"></td> <td style="width:30%;"><input style="width:90%;" class="input name" id="na1" value="" placeholder="Name"></td> <td style="width:15%;"><span class="input dr" id="dr1">2019-07-17T14:08:38.911Z</span></td> <td style="width:15%;"><span class="input do" id="do1">2019-07-04T12:00:00.000Z</span></td> </tr> <tr id="tr2"> <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb2"></td> <td style="width:30%;"><span style="width:100%;" class="input material" id="ma2">B text</span></td> <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co2" value="88" placeholder="Consign"></td> <td style="width:30%;"><input style="width:90%;" class="input name" id="na2" value="" placeholder="Name"></td> <td style="width:15%;"><span class="input dr" id="dr2">2019-07-17T14:08:38.913Z</span></td> <td style="width:15%;"><span class="input do" id="do2">2019-07-04T12:00:00.000Z</span></td> </tr> <tr id="tr3"> <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb3"></td> <td style="width:30%;"><span style="width:100%;" class="input material" id="ma3">C text</span></td> <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co3" value="24" placeholder="Consign"></td> <td style="width:30%;"><input style="width:90%;" class="input name" id="na3" value="" placeholder="Name"></td> <td style="width:15%;"><span class="input dr" id="dr3">2019-07-17T14:08:38.913Z</span></td> <td style="width:15%;"><span class="input do" id="do3">2019-07-04T12:00:00.000Z</span></td> </tr> </table> <button id="button">Show array</button> <pre id="output"></pre> 

Answer 2

You need to check the checked property of the checkbox and that is check by the is() method. And span did not have val method to get value. It is Html tag so you should do .text() or .html() to get the tag text or html. Also if you have classes on every control then you should find directly by class name.

I added the checkbox class to the checkbox control and get the checked property.

var items = [];
$("#tab1 tr").each(function() {
        items.push([$(this).find(".checkbox").is(":checked"),
        $(this).find(".material").text(),
        $(this).find(".consign").val(),
        $(this).find(".name").val(),
        $(this).find(".dc").text(),
        $(this).find(".do").text(),
        ]);
});

<table id="tab1" style="padding: 5px;width: 100%">
   <tr id="tr1">
      <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb1" class="checkbox"></td>
      <td style="width:30%;"><span style="width:100%;" class="input material" id="ma1">A text</span></td>
      <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co1" value="12" placeholder="Consign"></td>
      <td style="width:30%;"><input style="width:90%;" class="input name" id="na1" value="" placeholder="Name"></td>
      <td style="width:15%;"><span class="input dr" id="dr1">2019-07-17T14:08:38.911Z</span></td>
      <td style="width:15%;"><span class="input do" id="do1">2019-07-04T12:00:00.000Z</span></td>
   </tr>

</table>

I think this should work.