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

Posted 2023-03-05

【中文标题】如何使用 jQuery 遍历表行并获取单元格值

【英文标题】：How to iterate through a table rows and get the cell values using jQuery

【发布时间】：2012-05-13 03:57:14

【问题描述】：

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

<table id="TableView"  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>

我曾经这样迭代表：

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

            );

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

【参考方案1】：

大家好，感谢大家的帮助，下面是我的问题的工作代码

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

【参考方案2】：

我知道了并在下面解释：

//这个表有两行包含每一行，第一个td一个select，第二个td一个input tags，第三个td第二个input；

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

【讨论】：

对不起，Quill 先生，我是 *** 的新手，这是我发布的第一个答案。

在您的帖子下方有一个"edit" link。编辑您的帖子以改进格式，您可以在编辑时看到答案的外观。

【参考方案3】：

使用 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++;
);

【参考方案4】：

$(this) 而不是 $this

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

Proof_1:

proof_2:

【讨论】：

我也试过 $(this) 但我只得到第一个 tr 单元格数据

@Brittas 看看小提琴的console.log，它给了你所有的价值

【参考方案5】：

您得到了答案，但是当您可以直接输入输入时，为什么要遍历 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);​