JQuery to find how many tr in the nested table so to loop through items

Question

I tried to use JQuery to find how many tr in the nested table so to loop through items to export to Excel. The nested table doesn't have an id or class.

I tried to add an ID dynamically to the nested table. With an ID, much easier to get the tr count. But it doesn't seem to work: $("#Main").find("table").attr('id','nested');

Much appreciated! table code next

<table id="Main">
   <thead>
      <tr>
     <th style="width: 45px;"><input style="margin:0" type="checkbox" id ="CheckAllTable" class="checkAll" name="checkAll"></th>
        <th style="width: 100px;">Column1</th>
         <th style="width: 330px;">Column2</th>`enter code here`
         <th style="width: 112px;">Column3</th>
      </tr>
   </thead>
   <tbody id ="Tbody">
      <tr>
         <td><input style="margin:0" type="checkbox" name="check"></td>
         <td><a target="_blank" href="https://www.example.com/">xxx testing</a></td>
         <td>
            <span>
                  <table style="border-collapse&#58;collapse;table-layout&#58;auto;width&#58;100%;border&#58;1px;">
                     <tr>
                        <th style="text-align&#58;center;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">subcolumn1</th>
                        <th style="text-align&#58;center;border&#58;1px solid orange;">subcolumn2</th>
                        <th style="text-align&#58;center;border&#58;1px solid orange;">subcolumn3</th>
                        <th style="text-align&#58;center;border&#58;1px solid orange;">subcolumn4</th>
                     </tr>
                     <tr>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">AAA</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;50%;">BBB</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">CCC,DDD</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;10%;">EEE</td>
                     </tr>
                     <tr>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">AAA1</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;50%;">BBB1</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">CCC1</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;10%;">EEE1 </td>
                     </tr>
                  </table>
               </div>
            </span>
         </td>
         <td><span>08/18/2020</span></td>        
      </tr>
   </tbody>
</table>

question from:https://stackoverflow.com/questions/65603119/jquery-to-find-how-many-tr-in-the-nested-table-so-to-loop-through-items

Answer 1

You don't actually need jQuery for this - straight vanila JS will do it.

In either case you use a selector to get the parent table (#Main) and then within that another selector to get the nested table and its tr.length;

The following snippet shows your table and a non jquery approach as well as a jquery aporach.

Also note that you should rejig your code, IMO. Its always better to separate out the CSS from the HTML - so all that inline CSS should be moved to the CSS block.

And you should, for semantically correct table structure - have your th's in a thead element and the rest in a tbody element.

const nonjQueryNestedTable = document.querySelector('#Main table');
const nonjQueryNestedTableTrLength = nonjQueryNestedTable.querySelectorAll('tr').length;
console.log('non-jquery: ' + nonjQueryNestedTableTrLength); // gives 3

$(document).ready(function(){
  const nestedTable = $('#Main').find('table');
  const nestedTableTrLength = nestedTable.find('tr').length;
  console.log('jquery: ' + nestedTableTrLength); // gives 3
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Main">
   <thead>
     <tr>
     <th style="width: 45px;"><input style="margin:0" type="checkbox" id ="CheckAllTable" class="checkAll" name="checkAll"></th>
        <th style="width: 100px;">Column1</th>
         <th style="width: 330px;">Column2</th>
         <th style="width: 112px;">Column3</th>
      </tr>
   </thead>
   <tbody id ="Tbody">
      <tr>
         <td><input style="margin:0" type="checkbox" name="check"></td>
         <td><a target="_blank" href="https://www.example.com/">xxx testing</a></td>
         <td>
            <span>
                  <table style="border-collapse&#58;collapse;table-layout&#58;auto;width&#58;100%;border&#58;1px;">
                     <tr>
                        <th style="text-align&#58;center;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">subcolumn1</th>
                        <th style="text-align&#58;center;border&#58;1px solid orange;">subcolumn2</th>
                        <th style="text-align&#58;center;border&#58;1px solid orange;">subcolumn3</th>
                        <th style="text-align&#58;center;border&#58;1px solid orange;">subcolumn4</th>
                     </tr>
                     <tr>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">AAA</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;50%;">BBB</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">CCC,DDD</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;10%;">EEE</td>
                     </tr>
                     <tr>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">AAA1</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;50%;">BBB1</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;20%;">CCC1</td>
                        <td style="text-align&#58;left;border&#58;1px solid orange;padding&#58;10px;width&#58;10%;">EEE1 </td>
                     </tr>
                  </table>
               </div>
            </span>
         </td>
         <td><span>08/18/2020</span></td>        
      </tr>
   </tbody>
</table>