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

<!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();
}
时间: 2024-08-06 01:53:06

js 表格动态增加行通用函数的相关文章

JQuery实现表格动态增加行并对新行添加事件

实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并绑定timepicker 三:表2自动增加行,新行绑定timepicker HTML源码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

js 动态增加行删除行

1 <body> 2 <table id="tableID" border="1" align="center" width="60%"> 3 <tr> 4 <th>用户名</th> 5 <th>邮箱</th> 6 <th>操作</th> 7 </tr> 8 <tbody id="tbodyI

jquery表格动态增删改及取数据绑定数据完整方案

一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方案 那就是用GridView 那个庞大的服务器控件,我一真就不怎么喜欢用服务器控件,于是极力说服PM用js来处理,并成功争取到了,先说下如果用GridView来处理的缺点, 1 生成的html代码会比较冗余, 2 每一个操作都会伴随页面回发, 3 每个操作都会刷新页面,这样的用户体验极差,就算用up

JQUERY方法给TABLE动态增加行

比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab").append(trHTML);//在table最后面添加一行$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了,至于你是通过什么事件来动态添加那就看你自己的意思了,通过button或者div之类

C#动态增加行、删除行

原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView(放一个panel里),三列分别是文本框.文本框.按钮列 DataGridView: 隐藏标题栏:dataGridView1.ColumnHeadersVisible = false; 隐藏第一列:RowHeadersVisible=false; 不自动增加新行:AllowUserToAddRows=

JavaScript动态增删改表格数据

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="tex

jQuery的下面是动态表格动态表单中的HTML代码

动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script><script language="javascript">$("#addjobline").css("cursor","pointer");$(

表格的增删改查

这周,复习了JS的操作,并用更简捷的代码,实现了表格的增删改查!   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>   <meta charset="utf-8">   <title><

js的动态加载、缓存、更新以及复用(三)

总体思路 1.  建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2.  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3.  Js服务只提供通用的js,比如jQuery.my97.easyUI等(可根据实际情况设定具体的js文件). 4.  其他针对特点需求写的js文件,需要自己写代码加载.Js服务可以提供加载用函数.(正在考虑要不要使用sea.js) 5.  Js服务加载的js文件,不需要做任何修改.当然也不负责各个文件里的函数名称是否冲突