Ticket #8469 (closed bug: invalid)
nth-child selector problem in certain browsers
| Reported by: | random.genius | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | 1.next |
| Component: | unfiled | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I posted this on the forum but no replies. I'm having trouble with the selector to get/set data in certain columns. The example should place 'A' in the 3rd column but on the first row it places it in the 4th column. This seems to work fine in IE8 & Firefox 3.6 but doesn't work in Chrome 9 and Safari 5.
$(document).ready(function(){
var originalRow=$('#row1').html();
function newRow(r){
var col=1
var str=""
str = '<tr id="row'+r+'">';
str += originalRow;
str += '</tr>';
return str;
}
rows=""
for(row=2;row<5;row++){
rows=rows+newRow(row)
}
$('#editlist tr:last').after(rows);
$('#editlist tbody tr td:nth-child(3) input').val("A");
});
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="editlist">
<thead>
<tr>
<td>Field 1</td>
<td>Field 2</td>
<td>Field 3</td>
<td>Field 4</td>
</tr>
</thead>
<tbody>
<tr id="row1">
<td><input type="checkbox" value="checkbox"></td>
<td>text</td>
<td><input type="text" size="13"></td>
<td><input type="text" size="10"></td>
</tr>
</tbody>
</table>
</form>
I originally noticed this problem when I was using .each. For example to just console.log the value of a certain column. I would find that the second time I call it, it would display the correct result.
jsFiddle example http://jsfiddle.net/dreaminblue/Lenqt/
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

I realise that should be the first row is correct and it's the other rows are incorrect! Only happens because of the dynamically created rows.