Convert not selected checkboxes row in html table to javascript array

Question

I’ve got a HTML table and for each row I’ve got a checkbox, some cells with text and a cell with a input field, I need to convert all the rows except the one selcted into a javascript array so I can then pass the array to ajax and process with PHP.

This is what i've tried so far

var TableData = new Array();

$('.kmg_admin_millesimal_buildings_table tr input[type=checkbox]:not(:checked)').each(function(row, tr) {

  TableData[row] = {

    "Codice": $(tr).find('td:eq(1)').text(),
    "Piano": $(tr).find('td:eq(2)').text(),
    "Interno": $(tr).find('td:eq(3)').text(),
    "Millesimi": $(tr).find('td').eq(4).find('input').val()

  }

});

TableData.shift();
TableData.pop();

console.log(TableData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="kmg_admin_millesimal_buildings_table">
<thead>
  <tr>
    <th class="text-center"> Escludi</th>
    <th class="text-center"> Codice</th>
    <th class="text-center"> Piano</th>
    <th class="text-center"> Interno</th>
    <th> Millesimi</th>
  </tr>
</thead>
<tbody class="kmg_admin_millesimal_buildings_table_body">
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">4E</td>
    <td class="text-center">1</td>
    <td class="text-center">4E</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">9N</td>
    <td class="text-center">2</td>
    <td class="text-center">9N</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">2C</td>
    <td class="text-center">3</td>
    <td class="text-center">2C</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
</tbody>
<tfoot class="custom-table-footer">
  <tr>
    <td colspan="4" class="text-right"></td>
    <td class="km_total_millesimal_table font-green-sharp">0.00</td>
  </tr>
</tfoot>
<table>

The error is that the array is not created

instead of posting an image of your table, it would be helpful if you would just post the code, that way people who want to test your code don't have to write all the markup to generate it. — I wrestled a bear once.
– I wrestled a bear once., Commented Aug 15, 2019 at 18:58
you have two rows that are unchecked. after you pop() it you have one row. then you shift() it and now you have an empty array. that's probably the problem. — I wrestled a bear once.
– I wrestled a bear once., Commented Aug 15, 2019 at 19:01

I wrestled a bear once. · Accepted Answer · 2019-08-15 19:13:22Z

The problem is your selector is targetting inputs, not table rows. you can use parent() to get the row, like this. You still need to remove the shift() and the pop() too, since there are no inputs in the thead and tfoot these are not needed.

var TableData = new Array();

$('.kmg_admin_millesimal_buildings_table tr input[type=checkbox]:not(:checked)').each(function(row, input) {
  var tr = $(input).parent().parent()
  TableData[row] = {

    "Codice": $(tr).find('td:eq(1)').text(),
    "Piano": $(tr).find('td:eq(2)').text(),
    "Interno": $(tr).find('td:eq(3)').text(),
    "Millesimi": $(tr).find('td').eq(4).find('input').val()

  }

});

console.log(TableData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="kmg_admin_millesimal_buildings_table">
<thead>
  <tr>
    <th class="text-center"> Escludi</th>
    <th class="text-center"> Codice</th>
    <th class="text-center"> Piano</th>
    <th class="text-center"> Interno</th>
    <th> Millesimi</th>
  </tr>
</thead>
<tbody class="kmg_admin_millesimal_buildings_table_body">
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">4E</td>
    <td class="text-center">1</td>
    <td class="text-center">4E</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">9N</td>
    <td class="text-center">2</td>
    <td class="text-center">9N</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">2C</td>
    <td class="text-center">3</td>
    <td class="text-center">2C</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
</tbody>
<tfoot class="custom-table-footer">
  <tr>
    <td colspan="4" class="text-right"></td>
    <td class="km_total_millesimal_table font-green-sharp">0.00</td>
  </tr>
</tfoot>
<table>

Many thanks it works fine. Sorry I'm still not good at recognising the selectors in javascript. Thanks for your help

connexo · Accepted Answer · 2019-08-15 19:43:41Z

I'd use vanilla Javascript, as always. Here you go:

var TableData = new Array();

foo.addEventListener('change', (e) => {
  // only react if the change came from a checkbox
  if (e.target.matches('input.pippo')) {
    TableData = [...foo.querySelectorAll('.kmg_admin_millesimal_buildings_table tr input[type=checkbox]:not(:checked)')]
      .map(input => {
        let res = [...input.closest('tr').cells].map(cell => (cell.textContent || cell.children[0].value));
        return { codice: res[1], piano: res[2], interno: res[3], millesimi: res[4] };
      })
    console.clear();
    console.log(JSON.stringify(TableData));
  }
})

<table class="kmg_admin_millesimal_buildings_table" id="foo">
<thead>
  <tr>
    <th class="text-center"> Escludi</th>
    <th class="text-center"> Codice</th>
    <th class="text-center"> Piano</th>
    <th class="text-center"> Interno</th>
    <th> Millesimi</th>
  </tr>
</thead>
<tbody class="kmg_admin_millesimal_buildings_table_body">
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">4E</td>
    <td class="text-center">1</td>
    <td class="text-center">4E</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">9N</td>
    <td class="text-center">2</td>
    <td class="text-center">9N</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">2C</td>
    <td class="text-center">3</td>
    <td class="text-center">2C</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
</tbody>
<tfoot class="custom-table-footer">
  <tr>
    <td colspan="4" class="text-right"></td>
    <td class="km_total_millesimal_table font-green-sharp">0.00</td>
  </tr>
</tfoot>
<table>

Collectives™ on Stack Overflow

Convert not selected checkboxes row in html table to javascript array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related