Update multiple HTML table rows using AJAX

Question

I have a table that shows information pulled from a PHP script like so:

<tr class="online" id="0011e31xxxxx">
  <td><input type="checkbox" name="mac" value="0011e31xxxxx"></td>
  <td>1234567</td>
  <td>Modelnumber</td>
  <td>0011.e31x.xxxx</td>
  <td>10.x.x.x</td>
  <td>UBR4</td>
  <td>online</td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','resetubr');"><img src="/own/v2.2/images/reset.gif"></a></td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','resetsnmp');"><img src="/own/v2.2/images/reset.gif"></a></td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','refresh');"><img src="/own/v2.2/images/icone_refresh.png"></a></td>
</tr>

The 3 getInfo calls links are as follow and work perfectly:

<script>
function getInfo(id,adresseip,ubr,action) {
        var rowid = "tr#" + id;
        $.ajax({
            type: "GET",
            cache: false,
            url: 'index.php',
            data: "macaddress=" + id + "&ubr=" + ubr + "&adresseip=" + adresseip + "&action=" + action,
            beforeSend: function() {
                $(rowid).addClass("loading");
            },
            success: function(data) {
                $(rowid).replaceWith(data);
            }
        });
}
</script>

What I am trying to do is use the checkbox available at the beginning of each <tr> in order to generate some kind of loop to run one of the three links seen on each row.

Lets say I check 3 boxes (value 123, 234 and 345), I need the <tr id=123><tr id=234> and <tr id=345> to update their respective lines only while the rest of the data remains intact.

Is it possible to make such a loop to call the AJAX function to be run as many times as there are selected checkboxes? Or can the AJAX function iterate over each selected checkbox in order to update them one after the other?

Thank you

Answer 1

Please Search on google then try... if you don't get any answer then raise the Question...

Check this Link..

$('#TableID > tr').each(function() {
    var postData = {
    'FirstName':$(this).find('#FirstName').val(),
    'SurName':$(this).find('#Surname').val()
    };
    $.ajax({
    type: "POST",
    cache: false, 
    url: "WuFoo.aspx",
    data: postData ,
    success: success
    });
 });

Answer 2

You can get all checked check boxes with JQuery by doing something like

$("input[type=checkbox]:checked")

You can then use .each to iterate over them and update each appropriate row.

That code should go in your success: function of your ajax call.

Alternately you can use that same JQuery code to get the checked boxes, and then selected the <tr> in the .each and use that data to make an Ajax call.