How to iterate through a table rows and get the cell values using jQuery

Question

I am creating the below table dynamically using jQuery    After executing my code I get the table as below    lt table id  TableView  width  800  style  margin-left  60px  gt   lt tbody gt    lt tr gt    lt th gt Module lt  th gt    lt th gt Message lt  th gt   lt  tr gt   lt tr class  item  gt    lt td gt  car lt  td gt    lt td gt     lt input class  name  type  text  gt    lt  td gt    lt td gt   lt input class  id  type  hidden  value  5  gt   lt  td gt      lt  tr gt   lt tr class  item  gt    lt td gt  bus lt  td gt    lt td gt     lt input class  name  type  text  gt    lt  td gt    lt td gt   lt input class  id  type  hidden  value  9  gt   lt  td gt     lt  tr gt    I used to iterate the table like this       tr item   each function                 var quantity1    this find  input name   val            var quantity2    this find  input id   val                       By using the above query I am getting values of first row cells only    help me with jQuery that will iterate through the whole rows of the table and get the row cell values in quantity1 and quantity2

User · Answer

You got your answer  but why iterate over the tr when you can go straight for the inputs  That way you can store them easier into an array and it reduce the number of CSS queries  Depends what you want to do of course  but for collecting data it is a more flexible approach   http   jsfiddle net zqpgq   var array           tr item input   each function         array push           name    this  attr  class            value    this  val                console log array

User · Answer

Looping through a table for each row and reading the 1st column value works by using JQuery and DOM logic    var i   0  var t   document getElementById  flex1         flex1 tr   each function         var val1     t rows i  cells 0   text        alert val1        i

User · Answer

Hello every one thanks for the help below is the working code for my question      TableView tr item   each function          var quantity1   this  find  input name   val         var quantity2   this  find  input id   val

User · Answer

I got it and explained in below                         This table with two rows containing each row  one select in first td  and one input tags in second td and  second input in third td    lt table id  tableID  class  table table-condensed  gt          lt thead gt             lt tr gt                lt th gt  lt label gt From Group lt  lable gt  lt  th gt                lt th gt  lt label gt To Group lt  lable gt  lt  th gt                lt th gt  lt label gt Level lt  lable gt  lt  th gt               lt  tr gt          lt  thead gt            lt tbody gt              lt tr id  rowCount  gt                lt td gt                  lt select  gt                    lt option value    gt select lt  option gt                    lt option value  G1  gt G1 lt  option gt                    lt option value  G2  gt G2 lt  option gt                    lt option value  G3  gt G3 lt  option gt                    lt option value  G4  gt G4 lt  option gt                  lt  select gt               lt  td gt               lt td gt                 lt input type  text  id    value    readonly  readonly    gt               lt  td gt               lt td gt                 lt input type  text  value     readonly  readonly    gt               lt  td gt            lt  tr gt            lt tr id  rowCount  gt             lt td gt               lt select  gt                 lt option value    gt select lt  option gt                 lt option value  G1  gt G1 lt  option gt                 lt option value  G2  gt G2 lt  option gt                 lt option value  G3  gt G3 lt  option gt                 lt option value  G4  gt G4 lt  option gt              lt  select gt            lt  td gt            lt td gt              lt input type  text  id    value    readonly  readonly    gt            lt  td gt            lt td gt              lt input type  text  value     readonly  readonly    gt            lt  td gt         lt  tr gt     lt  tbody gt   lt  table gt      lt button type  button  class  btn btn-default generate-btn search-btn white-font border-6 no-border  id  saveDtls  gt Save lt  button gt      call on click of Save button       saveDtls   click function event       var TableData         initialize array                               var data       empty var       Here traverse and  read input select values present in each td of each tr         table tableID  gt  tbody  gt  tr   each function row  tr          TableData row             fromGroup       td eq 0  select  this  val             toGroup      td eq 1  input  this  val             level      td eq 2  input  this  val            Convert tableData array to JsonData   data JSON stringify TableData      alert  data  data

User · Answer

this  instead of  this     tr item   each function             var quantity1     this  find  input name   val                quantity2     this  find  input id   val          Proof 1   proof 2

[javascript] How to iterate through a table rows and get the cell values using jQuery

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to html-table