Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)

简介: Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)

最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现:

20190515024115508.png当点击“添加输入框”按钮时,就会自动添加一行

20190515024345187.png

下面我们来一下代码实现(把实际项目中的HTML代码简化了,其他功能可自己加)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    table.table input{ /*可输入区域样式*/
width:100%;
height: 100%;
border:none; /* 输入框不要边框 */
font-family:Arial;
}
</style>
</head>
<body>
<br><br>
<center><h3>Jquery实现表格动态增加一行,删除一行</h3></center>
<table class="table" border="1" align="center">
    <thead>
    <tr>
        <th>序号</th>
        <th>配置要求</th>
        <th>主要技术参数</th>
    </tr>
    </thead>
    <tbody>
    <tr id="clo">
        <td class="td">1</td>
        <td> <input placeholder="添加配置要求" /></td>
        <td> <input placeholder="添加主要技术参数" /></td>
    </tr>
    <tr>
        <td class="td">2</td>
        <td> <input placeholder="添加配置要求" /></td>
        <td> <input placeholder="添加主要技术参数" /></td>
    </tr> 
    </tbody>
</table>
<button onclick="fun()">增加一行</button>
<button onclick="del()">删除一行</button>
<script type="text/javascript">  
  //前面的序号1,2,3......                 
    var i = 1;
    $(".td").each(function(){
        $(this).html(i++);
    })
  //添加一行
    function fun(){
        var $td = $("#clo").clone();       //增加一行,克隆第一个对象
        $(".table").append($td);
        var i = 1;
        $(".td").each(function(){       //增加一行后重新更新序号1,2,3......
        $(this).html(i++);
        })
        $("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空
    }
  //删除一行
    function del(){
        $("table tr:not(:first):not(:first):last").remove();//移除最后一行,并且保留前两行
    }
</script>
 </body> 
</html>


该代码的截图:


2019051502483462.png


20190515024900515.png


简单易于理解,这里不做其他解说了

目录
相关文章
|
1月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
31 7
jQuery幸运大转盘抽奖活动代码
|
5月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
30 0
|
7月前
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
65 0
|
7月前
|
JavaScript
jQuery 动态输入文字展示效果
jQuery 动态输入文字展示效果
48 0
|
7月前
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
31 0
|
7月前
|
JavaScript 开发者
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
40 1
|
23天前
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
10 0
|
1月前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
16 1
jQuery模态框弹窗提示代码
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
16 0