jQuery получает индекс строки?
Даже это не работает....
$("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 ) {
Но, который не работал?
6 ответов
$("#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>');
});
Одна из ваших проблем заключается в том, что оставшиеся строки добавляются после привязки события фокуса, поэтому я решил использовать делегат для строк, которые не являются первой строкой.
Вы можете проверить для свойства rowIndex TR (DOM Level 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 () , но я не совсем уверен, как это будет написано. (Я бы предположил, что не (: первый) после tr .)
Вы можете использовать ] 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...
});
Чтобы получить первую строку, вы можете использовать:
$("#mytable > tbody > tr:first")
Более гибким является селектор gt () (или также eq () ):
$("#mytable > tbody > tr:gt(0)")
http://jsfiddle.net/rRRYK/2/ index () отлично работает проверьте пример