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

来源：互联网发布：阳光网络问政编辑：程序博客网时间：2024/06/06 20:42

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<scriptsrc="../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>

<tableid="t1"border="1">

<tr>

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

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

</tr>

<tr>

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

<td>30.00</td>

</tr>

<tr>

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

<td>18.50</td>

</tr>

<trid="l">

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

<td>32.00</td>

</tr>

</table>

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

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

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

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

</body>

</html>

阅读全文

0 0

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