jQuery count number of added table rows
I am hoping someone can help me discover the error in my code. What I am trying to do is simply count the number of table rows that were added to the table by the end user and if the table rows is not equal to 2 an alert box will pop up.
This is my html code:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="details">
<tr>
<td colspan="7"><input name="addRow" type="button" class="add" value="Click Here to Add" id="addRow">
</td>
</tr>
<tr>
<td><input name="deleteRowButton" type="button" class="deleteRowButton" value="-" id="deleteRowButton" style="margin-top:15px;">
</td>
<td width="" align="left">
<select class="section" name="section" style="margin-top:15px;">
<option value="select">Select</option>
</select>
</td>
<td width="" align="left">
<select> </select>
</td>
<td width="" align="left">
<select> </select>
</td>
<td width="" align="left">
<select> </select>
</td>
<td width="" align="left">
<select> </select>
<input type="text" value="" class="text" name="text" style="width: 100px;" />
</td>
<td width="" align="left">
<input type="text" /></td>
</tr>
</table>
And here are the add/delete functions:
$("#addRow").live("click", function() {
var row = $('#details tbody>tr:last').clone(true);
context = $(this).parents("table").filter("#area");开发者_如何学Python
$("td input:text", row).val("");
$("select option:selected", row).attr("selected", false);
$("#details", context).append(row);
});
$('.deleteRowButton').click(DeleteRow);
var rowCount = $('#details tr').length;
function DeleteRow() {
if (rowCount == 2){
alert($("#details tr").length);
} else {
$(this).parents('tr').first().remove();
}
}
Can anyone point out the problem to me?
the line where you count the rows (var rowCount = $('#details tr').length) should be inside the DeleteRow() function.
should it be:
if (rowCount != 2){
alert($("#details tr").length);
} else {
$(this).parents('tr').first().remove();
}
?
精彩评论