文档章节

js 表格动态增加行通用函数

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/10 13:10
字数 375
阅读 80
收藏 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
    <style>
        td{height:30px;border:1px solid #000;}
    </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable1">
    <tbody>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期1</td><td>时间</td><td>登记人</td>
    </tr>
    </tbody>
    </table>
    <button onclick="addRow(this)" >添加1</button>
    <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable2">
    <tbody>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期2</td><td>时间</td><td>登记人</td>
    </tr>
    </tbody>
    </table>
    <button onclick="addRow(this)" >添加2</button>
    <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable3">
    <tbody>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期3</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期4</td><td>时间</td><td>登记人</td>
    </tr>
    <tr>
        <td>日期5</td><td>时间</td><td>登记人</td>
    </tr>
    </tbody>
    </table>
    <button onclick="addRow(this)" >添加2</button>
    <script>
        function addRow(obj){
            var td_i = 0;
            var td_str = '';
            td_i = $(obj).prev().children().children().last().children().length;
            console.log(td_i);
            for (var i = 0; i < td_i; i++) {
                td_str = td_str + '<td></td>';
            };
            td_str = '<tr>' + td_str + '</tr>';
            $(obj).prev().children().children().last().after(td_str);
            td_str = ''; td_i = 0;
        }
    </script>
</body>
</html>

删除(按钮在表格行内):
function deleterowok(obj){
    $(obj).closest("tr").remove();
}
function changenumber(){
	for(i=0; i< $('.class_td_audit_number').length; i++){
		$('.class_td_audit_number')[i].innerHTML = (i+1);
	}
}


© 著作权归作者所有

共有 人打赏支持
下一篇: js setTimeOut
横着走的螃蟹
粉丝 15
博文 152
码字总数 34357
作品 0
朝阳
高级程序员
私信 提问
FineUI(开源版)v4.2.0 发布了!

源代码已经托管到OSC:http://git.oschina.net/sanshi/FineUI FineUI(开源版)是基于 ExtJS 的专业 ASP.NET 控件库,8年开源路,第123个版本,值得信赖! 在线示例:http://fineui.com/dem...

三生石上
2015/05/19
4.7K
19
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
5K
7
dotNetFlexGrid v1.22 发布

dotNetFlexGrid- Web2.0 asynchronous grid control for asp.net What is it? dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部......

磊华
2010/08/23
858
0
jquery 表格的增加删除和修改及设置奇偶行颜色

最近一周在学了一点点HTML, CSS, javascript,用javascript的jquery完成了一个简单的表格操作,有增加、删除和修改功能。 表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为...

长平狐
2012/12/10
193
0
jquery 表格的增加删除和修改及设置奇偶行颜色

最近一周在学了一点点HTML, CSS, javascript,用javascript的jquery完成了一个简单的表格操作,有增加、删除和修改功能。 表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为...

彭博
2012/04/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

初探Spring Cloud(一)

1. 什么是Spring Cloud? Spring提供了一系列工具,可以帮助开发人员迅速搭建分布式系统中的公共组件(比如:配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,...

__HuWei
17分钟前
0
0
Mac配置ssh免密钥登录

Mac终端每次使用ssh -p 22 user@ip登录很是麻烦,下面介绍配置ssh免密钥登录: cd ~/.ssh下创建conf文件,写入以下配置: Host test HostName ip Port 22 IdentityFile /Users/t/key/test.p...

littlemesieV
32分钟前
1
0
Spark2.0操作ES

ES提供了支持包来方便的操作ES。首先添加ES的依赖maven: <dependency> <groupId>org.elasticsearch</groupId> <artifactId>elasticsearch-spark-20_2.11</artifactId> <version>6.2.0</ver......

守望者之父
34分钟前
1
0
专业术语

1、防御性编程 DruidDataSource类有一个init方法,我们在spring中配置druid时,都会指定 init-method='init'. 而且DruidDataSource也在其他地方,诸如getConnection()方法里作了防御性编程, 也就...

still5656
36分钟前
1
0
微信开发--测试账号相关

1、微信公众平台选择代码开发后,其平台上的部分功能会不可用 可在开发者工具中选择开通测试账号,进行相关的功能调试(测试账号出微信支付不可调试外,其他功能基本上都可以调试) 2、测试账号...

Code辉
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部