Как я могу получить текст каждого td в каждом tr каждой таблицы, используя Jquery?

Question

Как получить текст каждого td в каждом tr каждого table?

Я попробовал приведенный ниже код, но не сработал, как ожидалось.

HTML КОД

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

Я получил это

[
    {"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"}
  ]

Я ожидал этого

[
    {"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

Из того, что я могу понять, все, что вам действительно нужно изменить, это $(".normaltable").each(function(index, object) { до $(".normaltable tbody tr").each(function(index, object) {, тогда вы должны получить то, что вам нужно sh.

Демо

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

Сначала попытайтесь найти каждую таблицу с одинаковым именем класса normalTable. Затем попробуйте найти каждую строку каждой таблицы. После получения строк попробуйте найти текст td, затем сохраните его в 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); } });