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("","");

 

转载于:https://www.cnblogs.com/chenyao/p/3156501.html