JQuery - 表格新增或删除一行

先练习表格的增加和删除, 熟悉JQuery第一步:

js代码:

<script type="text/javascript">
$(document).ready(function(){
$("#addBtn").click(function(){
claeses.addRow();
});
$("#deleteBtn").click(function(){
claeses.deleteRow();
});

});
function newClasses(){
var me = this;
this.addRow = function()
{
var copyRow = $("#basicRow tr").clone(true);
$("#addClassTable tbody").append(copyRow);
}
this.deleteRow = function()
{
$("#addClassTable input:checked").parent().parent().remove();
}
}
var claeses = new newClasses();
</script>

html代码:

<table id="addClassTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>dffdf</td>
</tr>
</tbody>
</table>
<input id="addBtn" type="button" value="add"/>
<input id="deleteBtn" type="button" value="delete"/>
<table class="hidden" id="basicTable">
<tbody id="basicRow">
<tr>
<td><input type="checkbox" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>

$(selector).parent("exp");

这个parent()方法返回的是所有父类, 如果加上参数"exp", 就会在所有父类中再找满足exp的父类返回.

例如 $("input:checked").parent().parent(".text").remove();

就会在上述代码中找 (包含选中复选框的input的)tr的class为text的元素返回.

$(selector).parents("exp");

同理, parents()返回的是所有父类元素.

这个例子还能学习以下方法:

$(selector).append(); $(selector).clone(true);

$(selector).addClass(""); $(selector).css("","");