Скрытие табличных данных с помощью <div style = "display: none" >

Ответ 1

Просто примените атрибут style к тегу tr. В случае нескольких тэг-тегов вам придется применить стиль к каждому элементу или обернуть их тегом tbody:

<table>
  <tr><th>Test Table</th><tr>
  <tbody style="display:none">
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
  </tbody>
</table>

Ответ 2

К сожалению, поскольку элементы div не могут быть прямыми потомками элементов table, способ, которым я это знаю, - применить правила CSS, которые вы хотите к каждому элементу tr, который вы хотите применить к нему.

<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr style="display: none; other-property: value;"><td>123456789</td><tr>
<tr style="display: none; other-property: value;"><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>

Если у вас есть несколько правил CSS для применения к рассматриваемым строкам, укажите соответствующие строки a class и выгрузите правила во внешний CSS.

<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr class="something"><td>123456789</td><tr>
<tr class="something"><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>

Ответ 3

Просто установите отображение: нет элементов, которые вы хотите скрыть:

<table>
<tr><th>Test Table</th><tr>
<tr style="display:none"><td>1. 123456789</td><tr>
<tr><td>2. 123456789</td><tr>
<tr><td>3. 123456789</td><tr>
</table>

Ответ 4

<style type="text/css">
.hidden { display:none; }
</style>

<table>
<tr><th>Test Table</th><tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
</table>

И вместо:

<div style="display:none;">
<table>...</table>
</div>

вам лучше использовать:   ...

Ответ 5

Дайте все строки, которые вы хотите скрыть имя класса, которое вы можете использовать для скрытия. Используйте javascript для добавления/удаления этого класса из разных строк.

<table>
<tr><th>Test Table</th><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
</table>

CSS

.toHide
{
 display: none;
}

Ответ 6

Вам не разрешено иметь теги div между тегами tr. Вам нужно искать другие стратегии, такие как создание класса CSS с помощью display: none и добавление этого в отношении строк или добавление встроенного стиля display: none к строкам.

.hidden
{
  display:none;
}

<table>
  <tr><td>I am visible</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
</table>

или

<table>
  <tr><td>I am visible</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
  <tr style="display:none"><td>I am hidden using inline style</td><tr>
</table>

Ответ 7

Да, вы можете скрыть только строки, которые вы хотите скрыть. Это может быть полезно, если вы хотите показывать строки только тогда, когда в строках, которые отображаются в настоящее время, выполняется некоторое условие. Следующие работали для меня.

<table>
  <tr><th>Sample Table</th></tr>  
  <tr id="row1">
    <td><input id="data1" type="text" name="data1" /></td>
  </tr>
 <tr id="row2" style="display: none;">
    <td><input id="data2" type="text" name="data2" /></td>
 </tr>
 <tr id="row3" style="display: none;">
    <td><input id="data3" type="text" name="data3" /></td>
 </tr>
</table>

В CSS сделайте следующее:

#row2{
    display: none;
}

#row3{
    display: none;
}

В JQuery у вас может быть что-то вроде следующего, чтобы показать нужные строки.

$(document).ready(function(){
    if($("#row1").val() === "sometext"){  //your desired condition
        $("#row2").show();
    }

    if($("#row2").val() !== ""){   //your desired condition
        $("#row3").show();
    }
});

Ответ 8

вы должны добавить style="display:none" в любой из <tr>, который вы хотите скрыть.

Ответ 9

Оберните разделы, которые вы хотите скрыть в собственном теле, и динамически показывайте/скрывайте их.

Ответ 10

Вместо использования <div> было бы лучше использовать, чтобы предоставить <tr> (который вы хотите скрыть) id и затем спрятать его с помощью javascript.

Ответ 11

    /* add javascript*/
    {
    document.getElementById('abc 1').style.display='none';
    }
   /* after that add html*/
   

    <html>
    <head>
    <title>...</title>
    </head>
    <body>
    <table border = 2>
    <tr id = "abc 1">
    <td>abcd</td>
    </tr>
    <tr id ="abc 2">
    <td>efgh</td>
    </tr>
    </table>
    </body>
    </html>