Блог

Главная - Вопросы по программированию - Удалить пустой td в таблице

Удалить пустой td в таблице

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть таблица и код jquery, и мне нужно: если td пусто, то удалите tr родительский элемент td .

Как я могу это сделать?

Мой код не работает. В моем примере у меня пусто td . Я хочу удалить tr родительский элемент. Почему мой код не работает? Что я делаю не так? Я td ищу каждый td , и если td он пуст, я удаляю tr родительский элемент. Но не работает.. Не ошибки..

 $('#table_serv tr').each(function(){ 
    if( $(this).find('td').text().trim() === '' )
        $(this).find('td').parent().remove(); // if it is empty, then remove parent tr
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" class="document-as" color="black" id="table_serv" style="font-size: 12px;border-right:0" width="100%">
    <thead>
        <tr>
            <th style="text-align: center;color: white;font-weight: 600; width:5%"></th>
            <th style="text-align: left;color: white;font-weight: 600;width:35%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Description</strong></span></span>
            </th>
            <th style="text-align: center;color: white;font-weight: 600;width:25%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Selling Price</strong></span></span>
            </th>
            <th style="text-align: center;color: white;font-weight: 600;width:15%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Quantity</strong></span></span>
            </th>
            <th style="text-align: center;color: white;font-weight: 600;width:15%"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Total</strong></span></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td>
            <td class="serv-price" style=""><span>0,00 €</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:324,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class="serv-price" style=""><span>324,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>324,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:432,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class="serv-price" style=""><span>432,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>432,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">7:34,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Declaration TR ZU 04/2011 for  5 Years</span><span class="de_de" style="">Deklaration TR ZU 04/2011 for 5 Jahre</span></td>
            <td class="serv-price" style=""><span>34,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>34,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td>
            <td class="serv-price" style=""><span>0,00 €</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:23,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class="serv-price" style=""><span>23,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>23,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:43,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class="serv-price" style=""><span>43,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>43,00 €</strong></span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><span>Sub Total</span></td>
            <td><span>856,00 €</span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Discount</span></td>
            <td><span style="font-family:verdana,geneva,sans-serif;">0,00 €</span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Total</span></td>
            <td><span style="font-family:verdana,geneva,sans-serif;">856,00 €</span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><strong>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Grand Total</strong></td>
            <td style=""><span><span><strong>1343,92 €</strong></span></span>
            </td>
        </tr>
    </tbody>
</table>

Комментарии:

1. где находится пустой td

2. но ваш TD не пуст, он содержит пустой интервал, попробуйте вместо этого его найти…

3. $(this).find('td').parent().remove(); должно быть так $(this).remove() же, как вы повторяете tr

4. @brk если вы запустите фрагмент, пустой td будет ячейка описания в первой строке — она заполнена html (spans и т. Д.), Но .text()==="" Для этой ячейки, поскольку html не включен в .text()

Ответ №1:

Проблема в том, что

 $(this).find('td').text()

даст вам один текст для всей строки, а не для отдельных td строк. Достаточно легко проверить, что он делает с:

 console.log($(this).find("td").text())

что даст для первой строки что-то вроде:

 :0,00       0,00 €  0,00    0,00 €

похоже, вы пытаетесь найти одну пустую ячейку (а не пустую строку) — поэтому вам нужно перебирать отдельные td s.

Один из способов:

 $('#table_serv tr td').each(function() { 
    if ($(this).text().trim() === '')
        $(this).parent().remove(); 
});

Ответ №2:

Я предполагаю, что в вашем примере вы хотите удалить первую строку, чтобы код работал. Может быть, вы можете сделать его немного короче после некоторых изменений.

 $(document).ready(function(){
    $("tr").each(function(){
       $(this).children("td").each(function(){
           if($(this).text() === "")
           {
              $(this).parents("tr").remove();
           }        
       });
    });
});

Ответ №3:

Код был почти хорош! Вам просто нужно было также выполнить цикл td.

 $('#table_serv tr').each(function(){ 
    var tds = $(this).find('td');
    tds.each(function(){
      if ($(this).text() === ''){
       $(this).parent().remove();
      }
    });    
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" class="document-as" color="black" id="table_serv" style="font-size: 12px;border-right:0" width="100%">
    <thead>
        <tr>
            <th style="text-align: center;color: white;font-weight: 600; width:5%"></th>
            <th style="text-align: left;color: white;font-weight: 600;width:35%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Description</strong></span></span>
            </th>
            <th style="text-align: center;color: white;font-weight: 600;width:25%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Selling Price</strong></span></span>
            </th>
            <th style="text-align: center;color: white;font-weight: 600;width:15%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Quantity</strong></span></span>
            </th>
            <th style="text-align: center;color: white;font-weight: 600;width:15%"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Total</strong></span></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td>
            <td class="serv-price" style=""><span>0,00 €</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:324,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class="serv-price" style=""><span>324,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>324,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:432,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class="serv-price" style=""><span>432,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>432,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">7:34,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Declaration TR ZU 04/2011 for  5 Years</span><span class="de_de" style="">Deklaration TR ZU 04/2011 for 5 Jahre</span></td>
            <td class="serv-price" style=""><span>34,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>34,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td>
            <td class="serv-price" style=""><span>0,00 €</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:23,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class="serv-price" style=""><span>23,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>23,00 €</strong></span></td>
        </tr>
        <tr>
            <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:43,00</span>
                <br> amp;nbsp;</td>
            <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class="serv-price" style=""><span>43,00 €</span></td>
            <td style="">1,00</td>
            <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>43,00 €</strong></span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><span>Sub Total</span></td>
            <td><span>856,00 €</span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Discount</span></td>
            <td><span style="font-family:verdana,geneva,sans-serif;">0,00 €</span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Total</span></td>
            <td><span style="font-family:verdana,geneva,sans-serif;">856,00 €</span></td>
        </tr>
        <tr>
            <td colspan="4" style=""><strong>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Grand Total</strong></td>
            <td style=""><span><span><strong>1343,92 €</strong></span></span>
            </td>
        </tr>
    </tbody>
</table>

Ответ №4:

Вот решение, которое мне пришлось придумать некоторое время назад, потому что я не хотел, чтобы определенные td появлялись в моей таблице, если они были пустыми. Это удаляет их, и они больше не являются их, но это альтернатива, которую вы можете сделать в своем тексте CSS. Это .td класс, поэтому назовите его как хотите, в моем реальном коде он выглядит как .tddata 

 .td:empty {
  display: none;
  height: 0;
  width: 0;
  padding: 0px;
}