文档章节

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

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/10 13:10
字数 375
阅读 106
收藏 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
博文 173
码字总数 48866
作品 0
朝阳
高级程序员
私信 提问
加载中

评论(0)

js如何实现动态的在表格中添加和删除行?(两种方法)

js如何实现动态的在表格中添加和删除行?(两种方法) 一、总结 1、table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.innerHTML+='<t...

osc_0zs17uxd
2018/05/28
4
0
JavaScript强大的 eval() 函数

定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。 语法 返回值 通过计算 string 得到的值(如果有的话)。 说明 该方法只接受原始字符串作为参数,如果 string 参...

osc_h9fpkpv6
01/09
4
0
js如何实现动态显示表格数据(点奇数显示奇数单元格内容)

js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一、总结 一句话总结: 1、动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值。 2、弄...

osc_lmwjsnx3
2018/06/05
2
0
Django前端HTML通过JS实现表格可编辑,动态添加行,回车完成新建文件夹

版本: django:2.1.7 python:3.7 功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行;单击页面的新增行,使单元格td变成可编辑状态;输入内容后,当单元格失去焦点时,保存输入的...

osc_tr9tcucx
2019/07/13
9
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.8K
19

没有更多内容

加载失败,请刷新页面

加载更多

websocket实现一个聊天室

上次讲了websoket的基础知识和应用插件,今天我们来用websocket来实现一个聊天程序。先看几张界面截图: 聊天界面: 历史消息查看: 用户上线提醒: 在线体验地址:地址 功能结构图 可以看到...

osc_k1o54uky
47分钟前
25
0
gvim的基本配置(中文乱码,行号和主题)

在C:\Program Files\Vim目录下的 _vimrc文件中,插入基本配置,包括中文乱码,行号和主题。 " Vim with all enhancementssource $VIMRUNTIME/vimrc_example.vim" 解决中文乱码set encodi......

osc_jcfo5qp3
47分钟前
15
0
cad版本转换器哪一款好用?DWG和DXF文件如何互转?

很多工作者在工作时发现,有时候自己接收到一个文件,点击打开时发现打不开,显示文件格式不对,遇见这样的情况就需要把文档转换成自己常用的文件格式。只有经过转换过的图才能打开查看,那么...

真不莲
48分钟前
20
0
C++类中引用成员和常量成员的初始化(初始化列表)

如果一个类是这样定义的: Class A{ public: A(int pram1, int pram2, int pram3); privite: int a; int &b; const int c; } ......

osc_y9y4gqxx
49分钟前
23
0
三年OI——我的初中信竞生涯

目录 前言 Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 后记 前言 OI至今已三年,小记一则,兼怀往事 文采不加,文章不伦不类,愧对语文老师 Part 1 初一上学期时,家父听说\(xzy\)(学长)得...

osc_9fexqrfv
50分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部