`
huibin
  • 浏览: 754104 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jquery的table操作之在指定行后添加新行

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="style/lib/jquery.js"></script>
<script>

   //注意input的id和tr的id要一样
   function addRowByID(currentRowID){
       //遍历每一行,找到指定id的行的位置i,然后在该行后添加新行
       $.each( $('table:first tbody tr'), function(i, tr){
           if($(this).attr('id')==currentRowID){
               //获取当前行
               var currentRow=$('table:first tbody tr:eq('+i+')');
               //要添加的行的id
               var addRowID=currentRowID+1;
               str = "<tr id = '"+addRowID+"'><td>"+addRowID+"</td><td>row"+addRowID+"</td>"+
               "<td><input id= '"+addRowID+"' type='button' value='添加行' onclick='addRowByID(this.id);' /></td></tr>";
               //当前行之后插入一行
               currentRow.after(str);
           }
       });
   }
</script>
</HEAD>

<BODY>
   <table border="1" bordercolor="green">
       <thead>
           <tr>
               <th>id</th>
               <th>value</th>
               <th>button</th>
           </tr>
       </thead>
       <tbody>
           <!-- 这里是input的id和tr的id要一样 -->
           <tr id='aaa'>
               <td>0</td>
               <td>row0</td>
               <td><input id='aaa' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
           </tr>
           <tr id='bbb'>
               <td>1</td>
               <td>row1</td>
               <td><input id='bbb' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
           </tr>
           <tr id='ccc'>
               <td>2</td>
               <td>row2</td>
               <td><input id='ccc' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>
           </tr>
       </tbody>
   </table>
</BODY>
</HTML>
 
分享到:
评论

相关推荐

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...

    jQuery table选中表格行变色

    本主题聚焦于“jQuery table选中表格行变色”这一功能,它在交互式网页设计中尤为常见,可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先,我们需要一个基本的HTML表格结构,例如: ```html ...

    jquery table 添加、删除行、列 utf-8

    在上面的代码中,`#myTable` 是表格的 ID,`newRow` 是要添加的新行,`find("tbody")` 是找到表格的主体部分,`append()` 将新行添加到 tbody 的最后。 ### 2. 删除行 删除行通常使用 `remove()` 方法。例如,如果...

    使用jquery给指定的table动态添加一行、删除一行

    支持在任意行添加一行且可配置的,如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行,随需求的变化都不会影响。 前提条件:行数需在表中存在否则添加不成功。 2)、删除一行 支持动态...

    jQuery操作Table技巧大汇总

    1. 鼠标移动行变色:jQuery的`hover()`函数用于在鼠标进入和离开时执行不同的操作。例如,当鼠标悬停在表格行上时,可以通过添加`hover`类来改变行内单元格的颜色,反之则移除该类以恢复原色。 2. 奇偶行不同颜色:...

    jQuery给指定的table动态添加删除行的操作方法

    在网页开发中,jQuery是一个非常常用的JavaScript库,它极大地简化了DOM操作,包括对表格(table)的操作。本文将详细讲解如何使用jQuery给指定的table动态添加和删除行,并提供相应的代码示例。 首先,jQuery的...

    jquery获取table指定行和列的数据方法(当前选中行、列)

    在本文中,将详细介绍使用jQuery如何获取表格中指定行和列的数据,具体来说,就是如何获取当前选中行和列的数据。 首先,要获取表格中指定行的数据,可以通过绑定点击事件到表格的行元素(tr)上。在点击事件的回调...

    74、jquery表格动态添加删除行代码

    `tbody`是为了确保新行被添加到表格主体,而非表头。 2. **动态删除行**: - 用户点击删除按钮时,可以通过事件监听器捕获这一操作,例如`$('button.delete').on('click', function() {...})`。 - 在事件处理函数...

    jquery对表格行增删操作

    在jQuery中,可以使用`append()`或`after()`方法向表格中添加新行。假设我们有一个`&lt;tr&gt;`模板,我们可以这样操作: ```javascript var newRow = $("&lt;tr&gt;&lt;td&gt;新数据1&lt;/td&gt;&lt;td&gt;新数据2&lt;/td&gt;&lt;/tr&gt;"); $("#myTable")....

    jQuery tablefilter demo

    总结来说,“jQuery tablefilter demo”展示了如何使用jQuery tablefilter插件来实现交互式的表格数据筛选,极大地提升了用户在查看和操作表格数据时的体验。这个插件的灵活性和易用性使其成为开发人员的得力工具,...

    jquery table分页 非常好用

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。当涉及到数据展示,特别是大数据集时,表格分页是必不可少的功能,以提高用户体验和加载速度。本文将深入探讨如何...

    jquery.table2excel.js(用于table导出Excel文件)

    1. **引入插件**:在HTML文件中,添加对`jquery.table2excel.js`的引用。通常,这需要放置在`&lt;head&gt;`标签或者`&lt;body&gt;`标签底部的`&lt;script&gt;`标签内。 ```html &lt;script src="path/to/jquery.js"&gt; ...

    table添加、删减行,单元格添加、修改、删除标记,对于指定标记默认生成显示,浮动定位且不会产生水平导航条

    在jQuery中,可以使用`.append()`方法向表格末尾添加行,或者使用`.prepend()`在表格开头插入行。例如,创建一个新的行并将其添加到表格中: ```javascript var newRow = $("&lt;tr&gt;&lt;td&gt;新内容&lt;/td&gt;&lt;/tr&gt;"); $("#...

    table JS 添加行和删除行

    在这个例子中,我们首先通过`getElementById`找到ID为'myTable'的表格,然后创建新行和新单元格,填充数据,最后将新行添加到表格的末尾。 **删除行:** 删除行操作相对简单,通常我们会根据某个条件(如点击某行...

    jquery表格动态添加删除行代码.zip

    这样,在添加新行时可以从数组中获取数据,删除行时更新数组内容。 7. **用户交互**:为了提供良好的用户体验,添加和删除行的过程应该即时反映在界面上,而无需页面刷新。这正是jQuery的优势所在,它能快速响应...

    jquery table 排序插件

    本篇文章将深入探讨“jQuery Table Sort”插件,这是一种专门用于在jQuery环境下对表格数据进行排序的工具。 首先,我们要理解jQuery Table Sort插件的基本工作原理。这个插件允许用户通过点击表格的表头来实现数据...

    jquery.table.rowspan.js 表格自动合并单元格插件

    要使用这个插件,首先确保引入了jQuery库,然后将`jquery.table.rowspan.js`文件添加到页面中。接着,选择需要应用插件的表格元素,并调用`.tableRowspan()`方法。例如: ```html &lt;script src="jquery.min.js"&gt; ...

    JQuery实现动态表格点击按钮表格增加一行

    ` 每添加完一行后,计数器`count`递增,以便为新行的输入框设置唯一的name属性值。 - `function del(btn)` 函数用于删除用户点击的行。 - `var tr = btn.parentElement.parentElement;` 获取被删除按钮所在的行。 ...

Global site tag (gtag.js) - Google Analytics