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); 
      });   
     } 
    }); 

Edit - Последняя версия, но до сих пор не работает ...

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").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 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 pseudoclass в сочетании с 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

Чтобы получить первую строку, которую вы могли бы использовать:

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

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

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

Answer 5

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

Answer 6

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