hide td element в зависимости от класса от

Я немного искал форумы, но не смог найти решение моего разборчивого вопроса.hide td element в зависимости от класса от

У меня есть таблица, которую я создаю программно. Первый элемент <thead>, некоторые элементы <th> будут иметь определенный класс. Затем, построив <tbody>, я хочу, чтобы элементы <td> попали под столбец <th> с определенным классом, чтобы скрыть. (Конечно, я скрою <th> с классом).

Может ли кто-нибудь помочь мне?

источник

2016-08-26 Robin

вы пробовали это по своему усмотрению? –

Я понятия не имею, с чего начать .. думал о создании массива с индексами из '' элементов с классом, а затем каким-то образом использовать css для использования 'td: nth-child (index)' для отображения: none? – Robin

С JQuery, что о чем-то вроде этого?

var nth_column=0; 
var th_with_class=[]; /* columns whose th has a certain class */

получить <th> с определенным классом:

jQuery("th").each(function() { 
    if ($(this).hasClass("foo")) { 
     th_with_class.push(nth_column); 
    } 
    nth_column++; 
});

А потом, скрыть <th> и <tds>:

for (i; i<th_with_class.length; i++) { 
    nth_column=th_with_class[i]; 
    $("tr > *:nth-child("+nth_column+")").addClass("hidden"); 
}

источник

2016-08-26 14:14:01

, это похоже на то, что мне нужно, позвольте мне попробовать его – Robin

закрыть. 2 вопроса: 'nth_column ++' должен появиться после 'if ($ (this) .hasClass (" foo ")) {' block. и он принимает только nth '' первой строки – Robin

, если вы добавите 'row_count = 1' и в цикле for, make' nth_column_row = nth_column * row_count; ', после цикла for' row_count ++ 'он работает. если вы отредактируете свой ответ с этим, я приму его. ^^ – Robin

Прежде всего создайте шаблон таблицы с display:none.

<table id="tempTable" style="display:none"> 
    <thead> 
     <tr> 
      <th class="hideClass"></th> 
      <th></th> 
      <th class="hideClass"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="hideClass firstTd"></td> 
      <td class="secondTd"></td> 
      <td class="hideClass"></td> 
     </tr> 
    </tbody> 
</table> 
<div id="tableContainer"> 

</div>

После этого клона этой таблицы с .clone(). Удалите Id и display:none с элемента. Добавьте свои данные в определенное место в таблице и добавьте таблицу в div.

var tableElem = $('#tempTable').clone(); 
tableElem.attr('id', ''); 
tableElem.css('display', 'block'); 

//Add your data to specific element like; 
tableElem.find('tbody .firstTd').text('Your text'); 

//After adding data to table append it to div or wherever you want 
$('#tableContainer').append(tableElem);

Это лучший способ создать таблицу. Это просто, и вы знаете, что создаете, потому что есть шаблон. Надеюсь, это поможет.

источник

2016-08-26 14:09:57 Qsprec

Если вы скрываете 3-й столбец, вы можете добавить .hidden класс th:nth-child(3), td:nth-child(3)

В вашем CSS вы бы

.hidden{ 
    display : none; 
}

источник

2016-08-26 14:10:06

ok, но я не знаю, какой столбец мне нужно скрыть, я не знаю, если это третий или девятый, это зависит от th с классом – Robin

. Вы делаете таблицу программно, чтобы создать список 'var indexes = []' then 'indexes.push (i)' при добавлении th с классом hide. Затем вы можете добавить скрытый класс, используя jquery, и селектор, построенный из значений в вашем списке –

hide td element в зависимости от класса от

ответ

Смежные вопросы