`

jquery动态添加表格行 移动行

阅读更多

html:

<table id="tbl">
   <tr>
     <td>111</td>
     <td>张三</td>
     <td>
      <input type="button" value="up" onclick="move(this,'up')" /> 
      <input type="button" value="down" onclick="move(this,'down')" /> 
      <input type="button" value="addTr" onclick="addTR()" /> 
     </td>
   </tr>
   <tr>
     <td>222</td>
     <td>李四</td>
     <td>
      <input type="button" value="up" onclick="move(this,'up')" /> 
      <input type="button" value="down" onclick="move(this,'down')" />
      <input type="button" value="addTr" onclick="addTR()" />  
      </td>
   </tr>
   <tr>
     <td>333</td>
     <td>王五</td>
     <td>
      <input type="button" value="up" onclick="move(this,'up')" /> 
      <input type="button" value="down" onclick="move(this,'down')" /> 
      <input type="button" value="addTr" onclick="addTR()" /> 
      </td>
   </tr>
   <tr>
     <td>444</td>
     <td>赵六</td>
     <td>
      <input type="button" value="up" onclick="move(this,'up')" /> 
      <input type="button" value="down" onclick="move(this,'down')" /> 
      <input type="button" value="addTr" onclick="addTR()" /> 
     </td>
   </tr>
 </table>

 

javascript:

  function move(obj,der){
    var $pre = $(obj).parent().parent().prev();
    var $next = $(obj).parent().parent().next();
    var $src = $(obj).parent().parent();
    
    switch(der){
      case 'up':
      if($pre){
         $src.insertBefore($pre);
       }
       break;
      case 'down':
      if( $next){
          $src.insertAfter($next);
       }
       break;
     }
   }
   
   function addTR(){
     var $tr = $('#tbl tr:last').clone(true);
     $tr.appendTo($('#tbl'));
    }

分享到:
评论

相关推荐

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

    这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验。在网页开发中,这种功能常见于数据管理界面,便于用户对数据进行排序和编辑。 首先,我们需要理解jQuery库的基本...

    jQuery动态创建表格生成器代码.zip

    3. **动态生成表格**:在jQuery中,可以通过创建`&lt;table&gt;`元素、`&lt;tr&gt;`行和`&lt;td&gt;`单元格来动态构建表格。例如,可以使用`$('&lt;table&gt;')`创建一个新表格,`$('table').append('&lt;tr&gt;')`添加一行,再用`$('tr').append('...

    JQuery操作表格(附源码)实现tr上下移动。

    添加表格行通常涉及到创建新的`&lt;tr&gt;`元素,并将其插入到表格的适当位置。以下是一个简单的示例: ```javascript // 创建新的tr var newRow = $("&lt;tr&gt;&lt;td&gt;New Data&lt;/td&gt;&lt;/tr&gt;"); // 将其添加到表格的最后一行 $("#...

    jQuery表格编辑添加删除行代码.zip

    在"jQuery表格编辑添加删除行代码"中,jQuery的主要作用是快速有效地操作DOM元素,使得用户界面的动态更新变得更加简单。 该代码的核心在于如何创建可编辑的表格。在`index.html`中,我们会看到一个基本的HTML表格...

    .net表格动态添加行

    1. **HTML表格动态添加行**:在JavaScript或jQuery中,我们可以直接操作DOM元素来实现。例如,创建一个新的`&lt;tr&gt;`元素,为其填充`&lt;td&gt;`,然后将其插入到表格的适当位置。在.NET后台,可以生成HTML字符串并返回给前端...

    运用jquery技术实现表格元素的上下移动

    在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素...

    jquery table 上下行移动互换

    在网页开发中,jQuery是一个非常流行的...以上就是使用jQuery实现表格行上下移动互换的基本步骤。这个功能在很多数据管理场景中都非常实用,通过结合HTML、CSS和jQuery,可以构建出更加动态和用户友好的网页应用。

    jquery 操作动态表格(原)

    4. **动画效果**:jQuery的动画功能可以为表格操作添加平滑的过渡效果,提高用户体验。例如,`$('tr').hide('slow')`可以缓慢隐藏表格行,`fadeIn()`和`fadeOut()`则用于元素的淡入淡出效果。 5. **插件使用**:...

    jquery动态增加修改删除表格,上移下移功能

    1. **动态增加**:用户可以添加新的行或列到表格中,无需刷新页面。这通常是通过点击一个“添加”按钮触发一个jQuery事件,然后利用DOM操作创建新的表格元素并将其插入到合适的位置。 2. **修改**:允许用户编辑...

    jquery做的table行上下移动,互换

    总结来说,这个知识点展示了如何利用jQuery实现表格行的上下移动,提高了用户对数据表的操作便利性。通过绑定事件处理器,我们可以轻松地实现行的动态互换,而无需刷新整个页面,从而提供了更流畅的用户体验。

    jQuery 鼠标移动到表格变色特效

    总之,"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例,通过学习这个例子,开发者可以掌握jQuery的基本用法,了解如何结合CSS实现交互效果,这对于创建动态、响应式的网页界面至...

    jquery 编辑表格

    使用jQuery添加行通常涉及`&lt;tr&gt;`的动态创建和插入。例如,可以先创建一个新的`&lt;tr&gt;`元素,填充相应的`&lt;td&gt;`,然后通过`.append()`方法将其添加到`&lt;tbody&gt;`或特定的`&lt;tr&gt;`后。以下是一个简单的示例: ```javascript ...

    JS控制HTMLDOM表格行上下移动

    标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM(Document Object Model)元素,特别是HTML表格的行(tr)进行上下移动的功能。这种功能常见于数据管理界面,允许用户通过交互调整...

    jQuery表格增加删除行响应式代码.zip

    本资源“jQuery表格增加删除行响应式代码.zip”提供了实现动态表格功能的示例代码,尤其适用于响应式设计,使表格在不同设备上都能保持良好的用户体验。 响应式设计是现代网页开发的关键特性,它确保网站在桌面、...

    JQuery表格,移动层操作(用于选择座位)

    本主题“JQuery表格,移动层操作(用于选择座位)”聚焦于利用jQuery技术来创建交互式的表格,特别是适用于选择特定位置的应用场景,如电影院座位预订或篮球场比赛座位选择。 首先,我们要理解jQuery中的表格操作。...

    jquery实现更改表格行顺序示例

    总之,这个示例展示了如何使用 jQuery 实现动态调整表格行顺序的功能,同时提供了简单的视觉反馈。在实际项目中,您可以根据需要对其进行扩展,例如添加确认对话框、优化动画效果,或者完善数据同步机制。

    jquery入门之双色表格

    这个例子中,当鼠标移动到表格的某一行上时,行的背景色将变为`highlight`类所定义的颜色。离开时,颜色恢复为原始状态。通过这种方式,我们可以实现描述中提到的“鼠标放上去背景会变化”的效果。 总结起来,实现...

    jQuery实现table中的tr上下移动并保持序号不变

    如果表格数据是动态加载或从服务器获取的,移动行后可能需要通过Ajax异步请求将新的顺序发送回服务器,以保持数据的一致性。这通常涉及`$.ajax()`或`$.getJSON()`等方法。 5. 动画效果: jQuery库还提供了丰富的...

    jQuery表格可拖动调整列宽度大小

    6. **动画效果**:jQuery的动画效果可以为拖动过程添加平滑过渡,提高用户体验。例如,`animate()`函数可以用来平滑地改变列宽。 7. **插件开发**:如果你不希望从零开始编写所有代码,可以考虑使用现有的jQuery...

    jQuery+Bootstrap表格内容修改删除编辑插件

    在本项目中,jQuery将用于处理表格中的动态事件,如点击单元格进行编辑、删除确认以及数据提交等。 Bootstrap则是Twitter推出的一个开源CSS/HTML框架,它提供了一套响应式布局、移动设备优先的WEB开发工具,能够...

Global site tag (gtag.js) - Google Analytics