how can I get table row data with jquery

Question

I have a table as follows:

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

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

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

why not use the class of the table? like var tb = $('.layui-table:eq(0) tbody'); — guradio
– guradio, Commented Feb 1, 2018 at 3:32
One thing to mention: the table is generated via jquery.table.rowspan.js. The provided answers are not able to get the right results. — Victor
– Victor, Commented Feb 1, 2018 at 5:13

Vivek · Accepted Answer · 2018-02-01 04:08:57Z

2

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>

answered Feb 1, 2018 at 4:08

Vivek

2,7651 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Victor Over a year ago

your code is ok to understand. But I still got number of rows = 0.

Vivek Over a year ago

Just run the code snippet and see the result yourself. If this doesn't solve your issue, you have some issue that is not covered in this question.

Victor Over a year ago

thanks for the response. I update my original post. the difference is that the table is not static one, but is generated from jquery.

Vivek Over a year ago

Add the code that generates the table to the question please.

Victor Over a year ago

can anyone help me out?

|

Collectives™ on Stack Overflow

how can I get table row data with jquery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related