如何遍历表行并使用jQuery获取单元格值

I am creating the below table dynamically using jQuery... After executing my code I get the table as below:

我使用jQuery动态创建下表...执行我的代码后，我得到如下表：

<table id="TableView" width="800" style="margin-left: 60px">
<tbody>
 <tr>
 <th>Module</th>
 <th>Message</th>
</tr>
<tr class="item">
 <td> car</td>
 <td>
  <input class="name" type="text">
 </td>
 <td>
<input class="id" type="hidden" value="5">
</td>
   </tr>
<tr class="item">
 <td> bus</td>
 <td>
  <input class="name" type="text">
 </td>
 <td>
<input class="id" type="hidden" value="9">
</td>
  </tr>

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.

通过使用上面的查询，我只得到第一行单元格的值...帮助我使用jQuery，它将遍历表的整行，并获取quantity1和quantity2中的行单元格值。

5 个解决方案

#1

$(this) instead of $this

$（this）而不是$ this

$("tr.item").each(function() {
        var quantity1 = $(this).find("input.name").val(),
            quantity2 = $(this).find("input.id").val();
});

Proof_1:

Proof_1：

proof_2:

proof_2：

#2

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();


            });

#3

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.

你得到了答案，但是为什么当你可以直接输入时迭代tr？这样，您可以将它们更容易地存储到数组中，并减少CSS查询的数量。当然，取决于您想要做什么，但是为了收集数据，这是一种更灵活的方法。

http://jsfiddle.net/zqpgq/

var array = [];

$("tr.item input").each(function() {
    array.push({
        name: $(this).attr('class'),
        value: $(this).val()
    });
});

console.log(array);

#4

Looping through a table for each row and reading the 1st column value works by using JQuery and DOM logic.

循环遍历每一行的表并读取第一列值通过使用JQuery和DOM逻辑工作。

var i = 0;
var t = document.getElementById('flex1');

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

#5

-1

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;

//这个表包含两行，每行包含一行，一行选择第一个td，一个输入标签位于第二个td，第二个输入位于第三个td;

<table id="tableID" class="table table-condensed">
       <thead>
          <tr>
             <th><label>From Group</lable></th>
             <th><label>To Group</lable></th>
             <th><label>Level</lable></th>

           </tr>
       </thead>
         <tbody>
           <tr id="rowCount">
             <td>
               <select >
                 <option value="">select</option>
                 <option value="G1">G1</option>
                 <option value="G2">G2</option>
                 <option value="G3">G3</option>
                 <option value="G4">G4</option>
               </select>
            </td>
            <td>
              <input type="text" id="" value="" readonly="readonly" />
            </td>
            <td>
              <input type="text" value=""  readonly="readonly" />
            </td>
         </tr>
         <tr id="rowCount">
          <td>
            <select >
              <option value="">select</option>
              <option value="G1">G1</option>
              <option value="G2">G2</option>
              <option value="G3">G3</option>
              <option value="G4">G4</option>
           </select>
         </td>
         <td>
           <input type="text" id="" value="" readonly="readonly" />
         </td>
         <td>
           <input type="text" value=""  readonly="readonly" />
         </td>
      </tr>
  </tbody>
</table>

  <button type="button" class="btn btn-default generate-btn search-btn white-font border-6 no-border" id="saveDtls">Save</button>


//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 > tbody > 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); 
  });
});

#1