<!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>