我如何使用 Jquery 获取每个表的每个 tr 中每个 td 的文本？

Question

How do i get the text of each td in each tr of each table ?

i tried the code below but didn't work as expected.

HTML CODE

 $(function () { $("[id*=btn").click(function () { var array1 = []; $(".normaltable").each(function (index, object) { var tableData = {}; tableData.datetime = $(this).find('td').eq(0).text().trim(); tableData.item = $(this).find('td').eq(1).text().trim(); tableData.p1 = $(this).find('td').eq(2).text().trim(); tableData.nt = $(this).find('td').eq(3).text().trim(); array1.push(tableData); }); alert(JSON.stringify(array1)); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 class="title">Group A</h2> <table class="normaltable"> <thead> <tr class="header0"> <th class="datetime first">Date</th> <th class="item">Item</th> <th class="p1">P1</th> <th class="nt">NT</th> </tr> </thead> <tbody> <tr class="rw"> <td class="datetime">09/01/20 19:33</td> <td class="item"><a><span class="tm"><span >Rice</span></span></a></td> <td class="p1 ">0:1</td> <td class="nt ftx">3:1</td> </tr> <tr class="rw"> <td class="datetime">09/01/20 19:33</td> <td class="item"><a><span class="tm"><span >Meat</span></span></a></td> <td class="p1 ">0:2</td> <td class="nt ftx ">8:1</td> </tr> <tr class="rw"> <td class="datetime">09/01/20 19:33</td> <td class="item"><a><span class="tm"><span >Wheat</span></span></a></td> <td class="p1 ">0:1</td> <td class="nt ftx ">3:1</td> </tr> </tbody> </table> <h2 class="title">Group B</h2> <table class="normaltable"> <thead> <tr class="header0"> <th class="datetime first">Date</th> <th class="item">Item</th> <th class="p1">P1</th> <th class="nt">NT</th> </tr> </thead> <tbody> <tr class="rw"> <td class="datetime">10/01/20 19:33</td> <td class="item"><a><span class="tm"><span >Beans</span></span></a></td> <td class="p1 ">1:1</td> <td class="nt ftx ">2:1</td> </tr> <tr class="rw"> <td class="datetime">10/01/20 19:33</td> <td class="item"><a><span class="tm"><span >Water</span></span></a></td> <td class="p1 ">3:1</td> <td class="nt ftx ">1:1</td> </tr> <tr class="rw"> <td class="datetime">10/01/20 19:33</td> <td class="item"><a><span class="tm"><span >Melon</span></span></a></td> <td class="p1 ">4:1</td> <td class="nt ftx ">5:1</td> </tr> </tbody> </table> <input type="button" value="Click" id="btn" />

I got this

[
    {"datetime":"09/01/20 19:33","item":"Rice","p1":"0:1","nt":"3:1"},
    {"datetime":"10/01/20 19:33","item":"Beans","p1":"1:1","nt":"2:1"}
  ]

I expected this

[
    {"datetime":"09/01/20 19:33","item":"Rice","p1":"0:1","nt":"3:1"},
    {"datetime":"09/01/20 19:33","item":"Meat","p1":"0:2","nt":"8:1"},         
    {"datetime":"09/01/20 19:33","item":"Wheat","p1":"0:1","nt":"3:1"},
    {"datetime":"10/01/20 19:33","item":"Beans","p1":"1:1","nt":"2:1"},
    {"datetime":"10/01/20 19:33","item":"Water","p1":"3:1","nt":"1:1"},
    {"datetime":"10/01/20 19:33","item":"Melon","p1":"4:1","nt":"5:1"}
]

Answer 1

From what I can understand all you really need to change is $(".normaltable").each(function(index, object) { to $(".normaltable tbody tr").each(function(index, object) { then you should get what you wish.

Demo

 $(function() { $("[id*=btn").click(function() { var array1 = []; $(".normaltable tbody tr").each(function(index, object) { var tableData = {}; tableData.datetime = $(this).find('td').eq(0).text().trim(); tableData.match = $(this).find('td').eq(1).text().trim(); tableData.p1 = $(this).find('td').eq(2).text().trim(); tableData.nt = $(this).find('td').eq(3).text().trim(); array1.push(tableData); }); console.log(JSON.stringify(array1)); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="normaltable"> <thead> <tr class="header0"> <th class="datetime first">Date</th> <th class="item">Item</th> <th class="p1">P1</th> <th class="nt">NT</th> </tr> </thead> <tbody> <tr class="rw"> <td class="datetime">09/01/20 19:33</td> <td class="item"> <a> <span class="tm"> <span > Rice </span> </span> </a> </td> <td class="p1 ">0:1</td> <td class="nt ftx">3:1</td> </tr> <tr class="rw"> <td class="datetime">09/01/20 19:33</td> <td class="item"> <a> <span class="tm"> <span > Meat </span> </span> </a> </td> <td class="p1 ">0:2</td> <td class="nt ftx ">8:1</td> </tr> <tr class="rw"> <td class="datetime">09/01/20 19:33</td> <td class="item"> <a> <span class="tm"> <span > Wheat </span> </span> </a> </td> <td class="p1 ">0:1</td> <td class="nt ftx ">3:1</td> </tr> </tbody> </table> <h2 class="title">Group B</h2> <table class="normaltable"> <thead> <tr class="header0"> <th class="datetime first">Date</th> <th class="item">Item</th> <th class="p1">P1</th> <th class="nt">NT</th> </tr> </thead> <tbody> <tr class="rw"> <td class="datetime">10/01/20 19:33</td> <td class="item"> <a> <span class="tm"> <span > Beans </span> </span> </a> </td> <td class="p1 ">1:1</td> <td class="nt ftx ">2:1</td> </tr> <tr class="rw"> <td class="datetime">10/01/20 19:33</td> <td class="item"> <a> <span class="tm"> <span > Water </span> </span> </a> </td> <td class="p1 ">3:1</td> <td class="nt ftx ">1:1</td> </tr> <tr class="rw"> <td class="datetime">10/01/20 19:33</td> <td class="item"> <a> <span class="tm"> <span > Melon </span> </span> </a> </td> <td class="p1 ">4:1</td> <td class="nt ftx ">5:1</td> </tr> </tbody> </table> <button id="btn1">run</button>

Answer 2

First try to find every table whom have same class name normalTable . Then try to find each row of the each table. After getting rows try to find text of td then store it in array

var array1 = []; $('.normalTable tbody tr').each(function() { var $tds = $(this).find('td'); if($tds.length != 0) { var $currText = $tds.eq(0).text(); array1.push($currText); } });