2013-07-27 6 views
2

Это HTML:JQuery: пропуск первой строки таблицы

<table id="tblTestAttributes"> 
    <thead> 
     <tr> <th>Head 1</th> <th>Head 2</th> </tr> 
    </thead> 
    <tbody> 
     <tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr> 
     <tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr> 
     <tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr> 
    </tbody>    
</table> 

Это Javascript, чтобы получить значения каждой строки:

var frequencies = []; 
if ($('#tblTestAttributes').length) { 
    $('#tblTestAttributes tr').each(function() { 
     var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val(); 
     alert(t); 
     frequencies.push(t); 
    }); 
} 

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

Так что я изменил селектор на это:

#tblTestAttributes tr:not(:first-child) 

Это пропускает второй tr, а также. Что здесь происходит?

+2

Идентификатор должен быть уникальным. Вместо этого используйте классы. – wakooka

+0

Отредактировано, чтобы включить thead и tbody в фрагмент HTML. – Animesh

+0

Вы правы в использовании идентификаторов, а не классов. Я даже не заметил этого, пока вы не упомянули. Снова HTML (в нашем проекте) полностью находится в руках дизайнера интерфейса, поэтому мне нужно подтолкнуть это изменение к ним. Благодарю. – Animesh

ответ

2

С точки зрения производительности использование .find() будет лучше, чем разрешение селектора с помощью Sizzle.

$('#tblTestAttributes').find('tbody').find('tr').each(function() { ... }); 

Вот jsPerf, чтобы показать это.

+0

Спасибо, что показал мне цепочку. Я не видел вашего ответа, пока не принял ответ. – Animesh

+0

Можете ли вы объяснить, что такое шипение в этом контексте? Я спрашиваю об этом, так как я только три недели прыгал в море jQuery и изучал вещи, когда я ухожу. – Animesh

+0

Когда вы пишете $ (...). SomeFunction(), вы передаете некоторые элементы функции. Чтобы получить элементы, вы можете использовать внутренний движок sizzle (это то, что другие ответы), или вы можете получить элемент верхнего уровня с $ ('# elementID'), для которого ничего не решить, поскольку это идентификатор , а затем используйте .find(), чтобы отфильтровать то, что вам нужно, в этом случае первая строка, но не заголовок. Вы должны изменить принятый ответ. – frenchie

3

использование

#tblTestAttributes tr:gt(0) 

или

#tblTestAttributes tbody tr 

Я рекомендовал бы 2-й, так как он может воспользоваться querySelectorAll и должен быть fastes решением.

ваш подход не работает, как ожидалось, потому что второй tr также first-child (из tbody)

3

Simple вы можете использовать ниже код

$('#tblTestAttributes tr:not(:has(th))').each(function() { 
2

Используйте tr + tr селектор, который получает все tr которые появляются после другого tr, поэтому первый пропущен.

Также нет необходимости проверять, существует ли таблица, так как в этом случае $.each даже не будет выполнен.

var frequencies = []; 
    $('#tblTestAttributes tr + tr').each(function() { 
     var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val(); 
     alert(t); 
     frequencies.push(t); 
    }); 

После правки:

Просто выберите только все tr внутри tbody:

$('#tblTestAttributes tbody tr').each(function(){ 
    ... 
} 
+0

Вы изменили 'html', теперь это совершенно другой вопрос :). – Cristy

+0

Эй, извините. У меня создалось впечатление, что я работаю на ТР, так что аэд и я не должны иметь значения, но позже мне показалось, что я должен сделать вопрос более ясным. – Animesh

+1

Это медленный вариант: http://jsperf.com/find-vs-sizzle-for-table-row-loop Взгляните на мой ответ за производительность. – frenchie

1

Это происходит потому, что второй ряд, по сути, первый ребенок в tbody просто как первая строка является первым дочерним элементом thead.

Чтобы принимать только элементы, которые вам нужны, я хотел бы предложить что-то ближе от вашей потребности:

#tblTestAttributes tr:has(td) 

Не забудьте избавиться от тех, кто дублирует txtDesc идентификатор, это является незаконным в HTML, используйте вместо этого.

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