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

最新推荐文章于 2024-06-13 16:29:32 发布

weixin_30632899

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量42

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bayes/p/5955086.html

版权

练习：使用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>

转载于:https://www.cnblogs.com/bayes/p/5955086.html

weixin_30632899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Asp.net入门3-03】jQuery-选择元素

练习：使用jQuery实现一个可以给table增加、删除行的页面HTML代码：<body> <input type="button" value="ADD" id="btn1"/> <input type="button" value="DEL" id="btn2"/> &lt...
复制链接

扫一扫