JQuery hide <tr> на основе <td> id

Question

Я хотел бы скрыть некоторую строку таблицы из моей таблицы на основе идентификатора данных таблицы, я нашел способы скрыть строку таблицы на основе значения данных таблицы, но это (в мой случай) не решение.

Например, позволяет сказать, что это мой стол:

<table id='table1' border="1"> 
<tr id='hideme'> 
<td id='letmehide'>row 1, cell 1</td> 
<td id='letmehide'>row 1, cell 2</td> 
</tr> 
<tr id='donthideme'> 
<td id='dontletmehide'>row 2, cell 1</td> 
<td id='dontletmehide'>row 2, cell 2</td> 
</tr> 
</table> 

Что должен мой JavaScript/JQuery выглядеть? Fiddle: http://jsfiddle.net/twyqS/

Answer 1

Примите во внимание, что идентификаторы должны быть уникальными на странице, поэтому я рекомендую вам использовать классы CSS вместо идентификаторов

HTML

<table id='table1' border="1"> 
<tr class='hideme'> 
<td class='letmehide'>row 1, cell 1</td> 
<td class='letmehide'>row 1, cell 2</td> 
</tr> 
<tr class='donthideme'> 
<td class='dontletmehide'>row 2, cell 1</td> 
<td class='dontletmehide'>row 2, cell 2</td> 
</tr> 
</table> 

JS

$('#table1 .hideme').hide(); 

Это все если вам нужно скрыть несколько строк.

Answer 2

Прежде всего, вы используете jQuery, используйте его для присоединения обработчиков событий. Это приводит к гораздо более семантическому HTML, и это лучшее разделение проблем.

Что касается вашей проблемы, вы должны использовать селектор :first, чтобы получить первый tr элемент, а затем hide() функции:

$('#table1 tr:first').hide(); 

В качестве альтернативы можно использовать id в tr, как предполагается, будет уникальный:

$('#hideme').hide(); 

Я хотел бы предложить Познакомившись с API JQuery, в частности, в selectors available.

Answer 3

Попробуйте это:

$('#table1 tr[id="hideme"]').hide();//in table1 hide tr that are with attribute id="hideme" 

Answer 4

ID of an element should be unique, поэтому используйте атрибут класса вместо ID в ваших элементов

Попробуйте

<table id='table1' border="1"> 
    <tr class='hideme'> 
     <td class='letmehide'>row 1, cell 1</td> 
     <td class='letmehide'>row 1, cell 2</td> 
    </tr> 
    <tr class='donthideme'> 
     <td class='dontletmehide'>row 2, cell 1</td> 
     <td class='dontletmehide'>row 2, cell 2</td> 
    </tr> 
</table> 

затем

$('#table1 tr:has(td.letmehide)').hide() 

Demo: Fiddle

Answer 5

$("#letmehide").parent().hide();

Answer 6

Попробуйте это ...

$(document).ready(function(){ 
    $('button').on('click', function(){ 
     $('#table1 tr:first').hide(); 
    }); 
}); 

И увидеть это ...

DEMO