! doctype html html lang = "en" head meta charset = "UTF-8" meta name = "Generator" content = "EditPlus®" meta name = "Author" content = "Yvette Lau" meta name = "Keywords" content = "关键字" meta name = "Description" content = "描述"
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Yvette Lau">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>Document</title>
<style>
#test{
width:300px;
height:300px;
background-color:#CCC;
float:left;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
</head>
<body>
<table id = "test" border="1px" style="text-align: center;">
<thead>
<tr><td>列1</td><td>列2</td><td>列3</td><td>列4</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<input type="button" id="btn" value="清空" οnclick="aa()"/>
<input type="button" id="btn" value="追加" οnclick="bb()"/>
<script>
function aa(){
$("#test tbody").html("");
}
function bb(){
var tp = $("#test tbody");
for (var i = 0;i<4;i++) {
tp.append("<tr><td>追加1</td><td>追加2</td><td>追加3</td><td>追加4</td></tr>")
}
}
</script>
</body>
</html>
1.原始数据展示
2.清空后效果
3.点击追加按钮后的效果
