JQuery получить индекс строки?

Question

Даже это не работает ....

$("table#mytable > tbody > tr").each(function(index) {
    if($(this).attr('id','firstrow')) {
        $("input[name^=f1]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);
        });         
    } else {
        $("input[name^=f2]").focus(function() {
        var newRow = '<tr><td></td><td></td></tr>';
        $("tbody").append(newRow);  
        });         
    }
});

<table id="mytable">
<tbody>
<!-- this is the first row, if the user clicks in f1, a new row is appended -->
<tr valign="top" id="firstrow">
    <td><input type="hidden" value="secret" name="std"></td>
    <td><input type="text" class="form-text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" class="form-text" value="" name="f3[]"><label>F2</label></td>
    <td><input type="text" class="form-text" value="" name="f4[]"><label>F4</label></td>
</tr>

<!-- this is the new row that is append if the user clicks in f1.  From here on out, a new row is appended if the user clicks in f2 -->
<tr valign="top">
    <td><input type="text" value="" name="f2"></td>
    <td><input type="text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" value="" name="f3[]"><label>F2</label></td>
    <td><input type="text" value="" name="f4[]"><label>F4</label></td>
</tr>
</tbody>
</table>

HTML, с которым я работаю ...

<table id="mytable">
<tbody>
<!-- this is the first row, if the user clicks in f1, a new row is appended -->
<tr valign="top">
    <td><input type="hidden" value="secret" name="std"></td>
    <td><input type="text" class="form-text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" class="form-text" value="" name="f3[]"><label>F3</label></td>
    <td><input type="text" class="form-text" value="" name="f4[]"><label>F4</label></td>
</tr>

<!-- this is the new row that is append if the user clicks in f1.  From here on out, a new row is appended if the user clicks in f2 -->
<tr valign="top">
    <td><input type="text" value="" name="f2[]"><label>F2</label></td>
    <td><input type="text" value="" name="f1[]"><label>F1</label></td>
    <td><input type="text" value="" name="f3[]"><label>F3</label></td>
    <td><input type="text" value="" name="f4[]"><label>F4</label></td>
</tr>
</tbody>
</table>

Еще одна ревизия, которая все еще не работает. Я даже не получаю оповещения ...

$("table#mytable > tbody > tr").each(function() {
        if($(this).index(0)) {
            $("input[name^=f1]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
                $("tbody").append(newRow);
            });         
        } else {
            $("input[name^=f2]").focus(function() {
                                                         alert(index);
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);  
            });         
        }
    });

Редактировать - последняя редакция, но все еще не работает ...

if($("#mytable > tbody > tr:first")) {
            $("input[name^=f1]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);
            });
    }

    if($("#mytable > tbody > tr:not(:first)")) {
            $("input[name^=f2]").focus(function() {
            var newRow = '<tr><td></td><td></td></tr>';
            $("tbody").append(newRow);  
            });
    }

Я пытаюсь написать функцию, которая будет что-то делать, если индекс строки равен 0, а затем что-то еще, если индекс строки больше 0. Нулевая часть работает, но я не могу понять синтаксис для строк с индексом больше 0.

Для строки tr [0] я делаю это:

if($("#mytable > tbody > tr ").index(0)) {

...

Я пытался:

if($("#mytable > tbody > tr ").index() > 0 ) {

Но это не сработало?

Answer 1

Чтобы получить первый ряд, вы можете использовать:

$("#mytable > tbody > tr:first")

Более гибким является селектор gt () (или eq () ):

$("#mytable > tbody > tr:gt(0)")

Answer 2

Вы можете проверить rowIndex свойство TR (DOM Level 2) и делать вещи на его основе.Смотри здесь

Answer 3

$("#mytable").delegate('tr:gt(0) input[name^=f2]', 'focus', function () {
    $('#mytable > tbody').append('<tr><td></td><td></td></tr>');
});
$('#mytable tr:first-child input[name^=f1]').bind('focus', function () {
    $('#mytable > tbody').append('<tr><td></td><td></td></tr>');
});

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

Answer 4

http://jsfiddle.net/rRRYK/2/ index () отлично работает, проверьте пример

Answer 5

Вы можете использовать селекторы first и not , например:

$(document).ready(function() {
    var firstRow = $('table tbody tr:first');
    var others = $('table tbody tr:not(:first)');
    //do your required work with firstRow and others...
});

Answer 6

Если вы просматриваете элементы:

$('#mytable>tbody>tr').each(
    function(index, item)
    {
        if(0 == index)
        {
            // Do something
        }
        else
        {
            // Do something else
        }
    }
);

Или вы можете использовать два разных объекта, вроде как:

var firstOne = $('#mytable>tbody>tr:first');
var otherOnes = $('#mytable>tbody>tr').filter(function(index) { return 0 < index; });

Вы также можете использовать псевдокласс :first в сочетании с not(), но я не совсем уверен, как это будет написано. (Я бы предположил not(:first) после tr.)