CODEWITHSUNDEEP
javascriptjqueryhtml-table
wolfpride71
wolfpride71

Reputation: 27

JQuery iterate through a table

I have a table where I can move rows up or down which I have put an id on the . Now I need to save the the new order of the table. I am thinking I need to save the rows[index] and but I have no experience with jquery. My table is id="rtbl", the button to call the function is "sroute". I have an alert in the function but that is not working. Just new to jquery, what do I need to do to make this work?

$("#sroute").click(function(){
    alert("Hello")
    $("#rtbl tr").each(function() {
        var val1 = $(t.rows[i].cells[0]).text();
        alert(val1) ;
        i++;
    });
});

<button id="sroute">Save Order</button>
<table id='rtbl'>
   <tr><th>Invoice</th></tr>
   <tr id='789'><td>789</td></tr>
   <tr id='123'><td>123</td></tr>
   <tr id='456'><td>456</td></tr>
</table>

So the goal is to update the db field 'stopnum' where invoice 789 stopnum would be 1, invoice 123 stopnum would be 2, and invoice 456 stopnum would be 3.

Upvotes: 1

Views: 57

Answers (1)

user120242
user120242

Reputation: 15268

Rough estimate for the object your db update API will need. You'll have to adjust it for that.

window.onload = (function(){
document.getElementById('sroute').onclick=( function(){
  var arrayOfInvoices = $('#rtbl tr:not(:eq(0))').map( function(i,el) { return ({ invoice: el.id, stopnum: i+1 }) } ).get();
  alert(JSON.stringify(arrayOfInvoices));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sroute">Save Order</button>
<table id='rtbl'>
   <tr><th>Invoice</th></tr>
   <tr id='789'><td>789</td></tr>
   <tr id='123'><td>123</td></tr>
   <tr id='456'><td>456</td></tr>
</table>

Upvotes: 2

Related Questions