jQuery追加tr到table中
2017-10-13 本文已影响130人
零一间
<html>
<head>
<style>
table {
border:1px solid #ccc
}
table td {
border:1px solid #ccc
}
</style>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js" ></script>
<script>
require.config({
paths: {
"jquery":
[
"https://cdn.staticfile.org/jquery/2.2.2/jquery.min",
<!-- cdn加载失败后，加载本地-->
"js/jquery.min"
]
}
});
require(['jquery'],function($){
$("#prepend_btn").click(function() {
$("#test-table tbody").prepend('<tr><td>hc1</td><td>hc2</td><td>hc3</td>td></tr>');
});
$("#append_btn").click(function() {
$("#test-table tbody").append('<tr><td>fc1</td><td>fc2</td><td>fc3</td></tr>');
});
})
</script>
</head>
<body>
<table id = "test-table">
<thead>
<tr><th>column 1</th><th>column 2</th><th>column 3</th></tr>
</thead>
<tbody>
<tr>
<td>c1</td><td>c2</td><td>c3</td>
</tr>
</tbody>
</table>
<input type="button" id="prepend_btn" value="在开头增加">
<input type="button" id="append_btn" value="在末尾增加">
</body>
</html>
image.png
