20170726 jQuery练习题表格操作练习题

最新推荐文章于 2021-06-16 20:05:37 发布

转载最新推荐文章于 2021-06-16 20:05:37 发布 · 1.9k 阅读

·

0

·

本文介绍了一个使用jQuery库来操作HTML页面中表格元素的具体实例，包括添加新的行、删除指定行、修改标题样式以及复制表格的最后一行。

 
 <!DOCTYPE html>

 
 <html lang="en">

 
 <head>

 
 <meta charset="UTF-8">

 
 <title></title>

 
 <script src="../js/jquery-3.1.1.min.js"></script>

 
 <script>

 
 $(document).ready(function () {

 
 $("#1").click(function () {

 
 $("<tr><td>幸福从天而降</td><td>18.50</td></tr>").insertAfter($("#t1 tr:eq(1)"));

})

 
 $("#2").click(function () {

 
 $("#t1 tr:gt(0):eq(0)").remove();

}

)

 
 $("#3").click(function () {

 
 $("#t1,#c1").css({'background-color':'blue','height':'200px','width':'100px'})

})

 
 $("#4").click(function () {

 
 $("table").append($("#l").clone());

}

)

}

)

 
 </script>

 
 <style>

td{

 
 width:100px;

}

 
 .c1{

 
 width: 200px;

}

 
 </style>

 
 </head>

 
 <body>

 
 <table id="t1"border="1">

 
 <tr>

 
 <td class="c1" id="ti1">书名</td>

 
 <td id="ti2">价格</td>

 
 </tr>

 
 <tr>

 
 <td class="c1">看得见风景的房间</td>

 
 <td>30.00</td>

 
 </tr>

 
 <tr>

 
 <td class="c1">幸福从天而降</td>

 
 <td>18.50</td>

 
 </tr>

 
 <tr id="l" >

 
 <td class="c1">60个瞬间</td>

 
 <td>32.00</td>

 
 </tr>

 
 </table>

 
 <input type="button" id="1" value="增加一行"/>

 
 <input type="button" id="2" value="删除第二行"/>

 
 <input type="button" id="3" value="修改标题样式"/>

 
 <input type="button" id="4" value="复制最后一行"/>

 
 </body>

 
 </html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。