【Asp.net入门3-03】jQuery-选择元素

 

 

 练习：使用jQuery实现一个可以给table增加、删除行的页面

HTML代码：

<body>  
 <input type="button" value="ADD" id="btn1"/>  
 <input type="button" value="DEL" id="btn2"/>  
 <div id="div1">  
    <table border="1" width="200px" id="t1">  
        <tr class="CaseRow">  
            <td>test1</td>  
            <td><input type="checkbox" /></td>  
        </tr>  
        <tr class="CaseRow">  
            <td>test2</td>  
            <td><input type="checkbox" /></td>  
        </tr>  
    </table>  
 </div>  
 </body>

JS代码

<script type="text/javascript">  
    $(document).ready(function(){  
        $("#btn1").click(function(){  
            var tr = "<tr class='CaseRow'><td>new</td><td><input type='checkbox' /></td></tr>";  
            $("table").append(tr);//向table中追加tr  
        });  
        $("#btn2").click(function(){  
            var num=$("#t1 tr").filter(".CaseRow").size();//获得表格行数  
            alert(num);  
            if(num==1){  
                alert("留一行，好不好");  
                return;  
            }  
            var t=$("input:checked").parent().parent("tr").remove();//移除选中的行  
        });  
    });  
</script>

 

posted @ 2016-10-13 08:12  盆古  阅读(338)  评论(0)  编辑  收藏  举报