table添加行
2024-10-19 04:24:48
需求是要实现表格的动态增加与删除,并且保留标题行和首行,找了半天jq插件,没找到合适的,所以自己写了个demo
<!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> <table class="table" border="1">
<thead>
<tr>
<th>检项</th>
<th>厚度</th>
<th>光度</th>
<th>外观</th>
</tr>
</thead>
<tbody>
<tr id="a"> <td class="td"></td>
<td><input type="" name=""></td>
<td><input type="" name=""></td>
<td><input type="" name=""></td> </tr>
<tr> <td class="td"></td>
<td><input type="" name=""></td>
<td><input type="" name=""></td>
<td><input type="" name=""></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 = $("#a").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>
最新文章
- RPC原来就是Socket——RPC框架到dubbo的服务动态注册,服务路由,负载均衡演化
- 51nod lyk与gcd
- [转]IPTABLES中SNAT和MASQUERADE的区别
- 谈谈MVC项目中的缓存功能设计的相关问题
- 【BZOJ-3876】支线剧情 有上下界的网络流(有下界有源有汇最小费用最大流)
- 排列 &;&; 组合
- Indoor Positioning System &; Real time location system
- Windows Form 分页。
- 《You dont know JS》类型篇总结
- <;HTML>;初识HTML
- Dart 中dynamic 的使用
- Thread(生产者和消费者) wait、notify、notifyAll
- [Java]类的生命周期(上)类的加载和连接[转]
- Android实践项目汇报-改(一)
- 通过runtime打印出对象所有属性的值
- 人人贷网的数据爬取(利用python包selenium)
- n个数取前k个最小数
- python 2.7中安装mysql
- oracle入门(一)
- Vue结合原生js实现自定义组件自动生成