adsense

Friday, January 26, 2018

Iterate a table rows with JQuery

 HTML table can be easily iterated using jQuery as shown below. The trick is to use a class for each row and iterate using $("tr.item") selector. 
Also note that $this.find is used to get value of a given table cell.


HTML
  <table>
 <tr class="item">

    <td> cell1 </td>
    <td> <span class="value">25.00 </span> € </td>
    <td> <input type="text" value="15" class="quantity" /> </td>
   </tr>
   <tr class="item">
    <td> cell2 </td>
    <td> <span class="value">50.00 </span> € </td>
    <td> <input type="text" value="16" class="quantity" /> </td>
   </tr>
</table>
 


JavaScript
$("tr.item").each(function() {
  $this = $(this);
 
  //gets value of span 
  var value = $this.find("span.value").html();
 
  //gets value of input 
  var quantity = $this.find("input.quantity").val();
});

No comments:

Post a Comment