Loop Through Each HTML Table Column and Get the Data using jQuery

Question

i m trying to get the data inside the html  lt tbody gt   Basically  i have many rows like this                     lt tbody gt                       lt tr gt                           lt td gt 63 lt  td gt                           lt td gt Computer lt  td gt                           lt td gt 3434 lt  td gt                           lt td gt                               lt button class  quot btn-medium btn-danger remove quot  id  quot mprDetailRemove quot  gt  lt i class  quot icon-remove quot  gt  lt  i gt  lt  button gt                           lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 64 lt  td gt                           lt td gt Stationary lt  td gt                           lt td gt 111 lt  td gt                           lt td gt                               lt button class  quot btn-medium btn-danger remove quot  id  quot Button1 quot  gt  lt i class  quot icon-remove quot  gt  lt  i gt  lt  button gt                           lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt 64 lt  td gt                           lt td gt Stationary lt  td gt                           lt td gt 11 lt  td gt                           lt td gt                               lt button class  quot btn-medium btn-danger remove quot  id  quot Button2 quot  gt  lt i class  quot icon-remove quot  gt  lt  i gt  lt  button gt                           lt  td gt                       lt  tr gt                   lt  tbody gt   Now  i m looping through and trying to get the  lt td gt  values like this          var table      quot  mprDetailDataTable table tbody quot             table find  tr   each function  key  val                  this  find  td   each function  key  val                    var productId   val key  innerHTML     this isn t working                 var product                     var Quantity                                  But  i m not able to get the values html text  of the each row  I want to assign these values to local variables   Also  i don t want to get the innerHTML of a button  which is in each row

User · Answer

try this          mprDetailDataTable tr gt 0    each function              var this row     this           var productId     trim this row find  td eq 0    html      td eq 0  means first td of this row         var product     trim this row find  td eq 1    html            var Quantity     trim this row find  td eq 2    html

User · Answer

You can try with textContent   var productId   val key  textContent

User · Answer

Using a nested  each   means that your inner loop is doing one td at a time  so you can t set the productId and product and quantity all in the inner loop   Also using function key  val  and then val key  innerHTML isn t right  the  each   method passes the index  an integer  and the actual element  so you d use function i  element  and then element innerHTML  Though jQuery also sets this to the element  so you can just say this innerHTML   Anyway  here s a way to get it to work       table find  tr   each function  i  el            var  tds     this  find  td                productId    tds eq 0  text                product    tds eq 1  text                Quantity    tds eq 2  text               do something with productId  product  Quantity           Demo  http   jsfiddle net bqX7Q

User · Answer

My first post     I tried this  change  tr  for  td  and you will get all HTMLRowElements into an Array  and using textContent will change from Object into String  var dataArray       var data   table find  td      Get All HTML td elements     Save important data into new Array for  var i   0  i  lt   data size   - 1  i   i   4      dataArray push data i  textContent  data i   1  textContent  data i   2  textContent

User · Answer

When you create your table  put your td with class    suma     function             funcion suma todo     var sum   0         suma   each function x y          sum    parseInt   this  text                                                                lblTotal   text sum             funcion suma por check                                                     input checkbox   change function        if   this  is   checked                    this  parent   parent   find  td last   addClass  suma2        else                   this  parent   parent   find  td last   removeClass  suma2                suma2Total                                                                                                                               function suma2Total          var sum2   0            suma2   each function x y           sum2    parseInt   this  text                               lblTotal2   text sum2                                                                                                                                  Ejemplo completo

[jquery] Loop Through Each HTML Table Column and Get the Data using jQuery

Examples related to jquery

Examples related to html

Examples related to loops

Examples related to foreach