文档章节

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

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/10 13:10
字数 375
阅读 64
收藏 1
点赞 0
评论 0
<!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);
	}
}


© 著作权归作者所有

共有 人打赏支持
横着走的螃蟹
粉丝 13
博文 119
码字总数 29165
作品 0
朝阳
高级程序员
JavaWeb03-HTML篇笔记(五)

1.1 案例四:使用JS完成后台数据展示的隔行换色的表格:1.1.1 需求: 在后台展示数据的页面上,通常使用表格标签进行数据的展示.没有背景的表格比较难看的,可以使用JS控制表格的隔行换色. 1...

我是小谷粒 ⋅ 05/04 ⋅ 0

以变制变——前端动态化代码保护方案探索

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文分享了腾讯防水墙团队关于机器对抗的动态化思路,希望能抛砖引玉,给现在正在做人机对抗的团队一些启发,帮助更多中小型公司...

腾讯云加社区 ⋅ 06/07 ⋅ 0

code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_ ⋅ 06/07 ⋅ 0

没有 Python,微软宣布 Excel 新增 JavaScript 支持

去年年底曾有外媒报道,由于社区用户的强烈要求,微软正考虑添加 Python 作为官方的一种 Excel 脚本语言。不过在昨天的 Build 2018 开发者大会上,微软没有透露有关 Python 支持的消息,而是...

王练 ⋅ 05/09 ⋅ 0

前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄 ⋅ 06/19 ⋅ 0

js笔记十七之DOM操作-增删改

DOM的赠删改 增 真是项目中, 我们会在js中动态创建一些html标签, 然后把其增加到页面中 document.createElement 在js中动态创建一个html标签 appendChild 容器.appendChild(新元素) 把当前创...

uplyw ⋅ 05/11 ⋅ 0

编写可维护的JavaScript

软件生命周期中80%的成本都消耗在了维护上;而且几乎所有的维护者都不是代码的直接开发人。如何让自己写的代码让别人阅读起来更高效?当然是写代码的时候注入一些规范。那么在Javascript中有...

Jouryjc ⋅ 06/12 ⋅ 0

爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137 ⋅ 06/05 ⋅ 0

JavaScript的self和this使用小结

一、self   这个非常简单。我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返...

new个对象 ⋅ 05/07 ⋅ 0

物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung ⋅ 2014/12/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具

压缩打包介绍 使用压缩工具的好处: 使用压缩文件,不仅可以节省磁盘空间,而且在传输时还能节省网络宽带。 我们通常讲的家用宽带和机房宽带100M是有区别的: 机房宽带的上行和下行都是100M,...

Linux_老吴 ⋅ 11分钟前 ⋅ 0

SpringBoot热部署加持

概述 进行SpringBoot的Web开发过程中,我们很多时候经常需要重启Web服务器才能保证修改的 源代码文件、或者一些诸如xml的配置文件、以及一些静态文件生效,这样耗时又低效。所谓的热部署指的...

CodeSheep ⋅ 18分钟前 ⋅ 0

OSChina 周六乱弹 —— 假如你被熊困到树上

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》 《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》- 谢...

小小编辑 ⋅ 49分钟前 ⋅ 5

vbs 取文件大小 字节

dim namedim fs, s'name = Inputbox("姓名")'msgbox(name)set fs = wscript.createobject("scripting.filesystemobject") 'fs为FSO实例if (fs.folderexists("c:\temp"))......

vga ⋅ 今天 ⋅ 1

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部