Jquery操作表格(清空表头以外的数据后进行追加)

最新推荐文章于 2021-12-06 10:51:41 发布

风泊月

最新推荐文章于 2021-12-06 10:51:41 发布

阅读量1.3k

点赞数

分类专栏： Js 文章标签： Jquery操作表格

本文链接：https://blog.csdn.net/hello_word2/article/details/79678116

版权

Js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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="描述">
    <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.原始数据展示