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() Selector（或eq()）：

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

Answer 2

如果您正在循环使用这些项目：

$('#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。）

Answer 3

您可以使用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 4

http://jsfiddle.net/rRRYK/2/ index（）可以正常查看示例

Answer 5

$("#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 6

您可以检查TR（DOM Level 2）的rowIndex属性并根据它执行操作。见here

jquery获取一行的索引？

6 个答案: