我怎样才能用jQuery获取表行数据

问题描述

我有一张桌子，如下:

<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
    <tbody>
    <tr data-index="0" class="">
        <td data-field="sid" data-content="123456">
            <div class="layui-table-cell laytable-cell-1-sid"> 123456 </div>
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    <tr data-index="1" class="">
        <td data-field="sid" data-content="100012">
            <div class="layui-table-cell laytable-cell-1-sid"> 100012 </div>
        </td>
        <td>
            <div></div>
        </td>
    </tr>
    </tbody>
</table>

我可以使用以下脚本获取tbody，但不能获取tr或td

I can use the following scripts to get tbody but not tr or td

$("document").ready(function(){
    var tb = $('.layui-table-main table:eq(0) tbody');
    console.log(tb);
    var size=tb.find("tr").length;
    console.log(size);
});

我一直想做的是获取每个td的值.我怎样才能得到它们?

What I have been trying to do is to get each td's value. How can I get them?

推荐答案

您可以使用tbody上的.find("tr")查找tr的列表，然后遍历结果以获取每一行.在该循环中，可以在每个row上使用.find("td")查找td的列表.请参见下面的实现.

You can find the list of tr using .find("tr") on the tbody and then loop through the result to get each row. Within that loop, you can find the list of td using .find("td") on each row. See the implementation below.

$("document").ready(function() {
  var tb = $('.layui-table:eq(0) tbody');
  var size = tb.find("tr").length;
  console.log("Number of rows : " + size);
  tb.find("tr").each(function(index, element) {
    var colSize = $(element).find('td').length;
    console.log("  Number of cols in row " + (index + 1) + " : " + colSize);
    $(element).find('td').each(function(index, element) {
      var colVal = $(element).text();
      console.log("    Value in col " + (index + 1) + " : " + colVal.trim());
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
  <tbody>
    <tr data-index="0" class="">
      <td data-field="sid" data-content="123456">
        <div class="layui-table-cell laytable-cell-1-sid"> 123456 </div>
      </td>
      <td>
        <div></div>
      </td>
    </tr>
    <tr data-index="1" class="">
      <td data-field="sid" data-content="100012">
        <div class="layui-table-cell laytable-cell-1-sid"> 100012 </div>
      </td>
      <td>
        <div></div>
      </td>
    </tr>
  </tbody>
</table>

这篇关于我怎样才能用jQuery获取表行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！