jQuery, чтобы найти, сколько tr во вложенной таблице, чтобы перебирать элементы

ProgramBox

jQuery, чтобы найти, сколько tr во вложенной таблице, чтобы перебирать элементы

Post author:admin
Запись опубликована:17 ноября, 2022
Post category:Вопросы по программированию

#jquery

#jquery ( jquery )

Вопрос:

Я попытался использовать jQuery, чтобы найти, сколько tr во вложенной таблице, чтобы перебирать элементы для экспорта в Excel. Вложенная таблица не имеет идентификатора или класса.

Я попытался динамически добавить идентификатор во вложенную таблицу. С идентификатором гораздо проще получить количество tr. Но, похоже, это не работает: $(«#Main»).find(«таблица»).attr(‘id’,’вложенный’);

Очень признателен! следующий код таблицы

 
<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-collapseamp;#58;collapse;table-layoutamp;#58;auto;widthamp;#58;100%;borderamp;#58;1px;">
                     <tr>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">subcolumn1</th>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;">subcolumn2</th>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;">subcolumn3</th>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;">subcolumn4</th>
                     </tr>
                     <tr>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">AAA</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;50%;">BBB</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">CCC,DDD</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;10%;">EEE</td>
                     </tr>
                     <tr>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">AAA1</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;50%;">BBB1</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">CCC1</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;10%;">EEE1 </td>
                     </tr>
                  </table>
               </div>
            </span>
         </td>
         <td><span>08/18/2020</span></td>        
      </tr>
   </tbody>
</table>

1. Во вложенной таблице нет идентификатора nested .

2. Если вы можете программно перейти к таблице, чтобы добавить идентификатор, вы можете программно перейти к таблице, чтобы посчитать tr s…

3. @HereticMonkey, да, я пытался программно добавить идентификатор во вложенную таблицу, используя: $(«#Main»).find(«таблица»).attr(‘id’,’nested’); но это не работает.

4. Да, я это читал. Я хотел сказать, что вам не нужно получать элемент, добавлять идентификатор, затем снова получать элемент, а затем считать tr s. То же самое, что сказано в ответе, во втором абзаце.

Ответ №1:

На самом деле вам не нужен jQuery для этого — прямой vanila JS сделает это.

В любом случае вы используете селектор для получения родительской таблицы (#Main), а затем внутри этого другого селектора для получения вложенной таблицы и ее tr.length;

Следующий фрагмент показывает вашу таблицу и подход, отличный от jquery, а также jquery aporach.

Также обратите внимание, что вам следует изменить свой код, IMO. Всегда лучше отделять CSS от HTML — поэтому весь этот встроенный CSS должен быть перемещен в блок CSS.

И вы должны, для семантически правильной структуры таблицы, иметь свои th в элементе thead, а остальные — в элементе tbody.

 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-collapseamp;#58;collapse;table-layoutamp;#58;auto;widthamp;#58;100%;borderamp;#58;1px;">
                     <tr>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">subcolumn1</th>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;">subcolumn2</th>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;">subcolumn3</th>
                        <th style="text-alignamp;#58;center;borderamp;#58;1px solid orange;">subcolumn4</th>
                     </tr>
                     <tr>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">AAA</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;50%;">BBB</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">CCC,DDD</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;10%;">EEE</td>
                     </tr>
                     <tr>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">AAA1</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;50%;">BBB1</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;20%;">CCC1</td>
                        <td style="text-alignamp;#58;left;borderamp;#58;1px solid orange;paddingamp;#58;10px;widthamp;#58;10%;">EEE1 </td>
                     </tr>
                  </table>
               </div>
            </span>
         </td>
         <td><span>08/18/2020</span></td>        
      </tr>
   </tbody>
</table>

Развернуть фрагмент