`
huibin
  • 浏览: 750739 次
  • 性别: 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>
 
分享到：
| 时间管理101招
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    利用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的...

    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如何获取表格中指定行和列的数据，具体来说，就是如何获取当前选中行和列的数据。 首先，要获取表格中指定行的数据，可以通过绑定点击事件到表格的行元素（tr）上。在点击事件的回调...

    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.table.rowspan.js 表格自动合并单元格插件

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

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

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

    jquery table 排序插件

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

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

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

    jquery实现的可增加，删除行，可多行上下移动表格

    在增加行的场景中，开发者可能通过这两个方法将新行插入到表格中。 2. `remove()`：此方法用于移除DOM中的指定元素，用于删除行的功能。 3. `after()` 和 `before()`：这些方法可以将新的HTML内容插入到已存在元素...

Magicbox
Global site tag (gtag.js) - Google Analytics