Скрытие данных таблицы с помощью - PullRequest
Новая
       32

Скрытие данных таблицы с помощью

29 голосов
/ 02 августа 2011

Итак, я спрятал целые таблицы вот так, и это прекрасно работает: 

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

Но я хочу спрятать только группу строк вот так: 

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

Ноэто не работаетЕсть намеки?

Ответы [ 11 ]

39 голосов
/ 02 августа 2011

Просто примените атрибут style к тегу tr.В случае нескольких тегов 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>
9 голосов
/ 02 августа 2011

К сожалению, поскольку 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 для применения к рассматриваемым строкам, вместо этого присвойте соответствующим строкам class и перенесите правила во внешний CSS.

5 голосов
/ 02 августа 2011

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

<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 голосов
/ 02 августа 2011 
<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>

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

3 голосов
/ 02 августа 2011

Укажите все строки, которые вы хотите скрыть, имя класса, которое вы можете использовать для сокрытия. Используйте 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;
}
2 голосов
/ 02 августа 2011

Вы не можете иметь 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>
1 голос
/ 27 июня 2016 
    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    /* 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>
1 голос
/ 27 июня 2016

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

1 голос
/ 18 ноября 2014

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

<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();
    }
});
1 голос
/ 13 июня 2013

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...