最近学习jQuery,真的很强大,试了下表格行的动态增删,代码很简单,如下
<html>
<head><title></title></head>
<body>
<script type="text/javascript" src="../js/jquery.js"></script><!--引入jQuery.js-->
<input type="text" id="enter" value="default" /><!--输入表格的内容,默认default-->
<input type="button" value="add" onclick="add()" /><!--增加一行-->
<input type="button" value="remove" onclick="remove()" /><!--删除最后一行-->
<table id="tbl" border="1" width="100px" >
<tr><th>Title</th></tr>
</table>
</body>
<script type="text/javascript">
var i = 0;
function add() {
i++;
var v = document.getElementById('enter').value;
var content = "<tr class="+i+"><td>"+v+"</td></tr>";
$('#tbl').append(content);
}
function remove() {
$('tr').remove('.'+i);
i--;
}
</script>
</html>
稍微改造一下即可实现删除指定行,不赘述。
分享到:
相关推荐
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
jQuery实现表格行的动态增加与删除(改进版)
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
使用Jquery实现表格的增删改的动画效果,使用bootstrap构建的界面
纯Jquery表格全选+反选+增删查找,一个简陋版本,仅供参考,细节处理不周到处请评论,后期有空修改
JQuery 实现表格的增删查和光棒效果 Jquery添加一行,可以查询,可以选中一行删除 还有选中光棒效果哟
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考,具体如下: 这里实现的是在jQuery中通过按钮的形式,对表格进行的一些基本操作,可以实现表格的增删改操作,并实现对鼠标事件监听,实现表格...
主要为大家详细介绍了jQuery对table表格进行增删改查操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jqery实现的表格动态添加行删除行,绑定后台数据,效率高。很不错的学习资料以及项目运用资料。
需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据源,并且可以新增空白行,直接...
jQuery表格增加删除代码基于jquery1.7.js制作,单元格增行删行代码。
PHP+MYSQL入门学习并实现后端增删改查,bootstrap实现后端页面;前端有ajax请求json格式数据,jquery动态创建元素等
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
jquery easy ui 增改删 表格
jQuery实现表格数据增、删、改、查
jQuery实现增删改查 本文实例为大家分享了jQuery实现增删改查的具体代码,供大家参考,具体内容如下 jquery用的是1.11版本 css就用bootstrap吧 因为增和改用了模态框修改,所以还用了bootstrap.js实现模态框...
表格增行删行一般情况下都是通过修改html结构实现的,接下来为大家介绍下如何使用jquery实现表格增行删行,感兴趣的各位可不要错过了哈
本篇文章主要介绍了Jquery与Bootstrap实现后台管理页面增删改查功能示例,具有一定的参考价值,有兴趣的可以了解一下。