当前位置: 首页 > Java博客 > jQuery
如何使用jquery获取表行数据
发布日期:2018-09-29 22:22:33  来源:http://www.javaxiangmu.com   阅读:1926   作者:chenssy
利用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但不是trtd

$("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很有价值。那怎样才能得到呢

方法: 找到tr使用.find("tr")tbody然后循环遍历结果,得到每一行。在该循环中,您可以找到td使用.find("td")每一个row。见下文的实施情况。

 

$("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>

 


本文编辑:chenssy








  • | 热门项目内容
  • | 联系我们
Javaxiangmu官方群01:Javaxiangmu官方群01
Javaxiangmu官方群01:105049007
QQ客服:1376806388
微信公众号:
备案号:冀ICP备17014229号