`

jquery 添加 删除table tr

阅读更多
<html>
   <script type="text/javascript" src="jquery.js"></script>
   <body>
        <button onclick="javascript:addCurrentRow();" >添加</button>
  <table id="allDatas">
       <tr>
    <th>选择图片</th>
    <th>图片名称</th>
    <th>描述</th>
      </tr>

   <tr>
        <td> <input type="file" name="imageFile1"/></td>
     <td><input name="imageName"></input></td>
     <td><input name="note" /> </td>
     <td><a href="javascript:;" onclick="deleteCurrentRow(this);"><font color='red'>删除</font></a>  </td>
      </tr>
  </table>
    <script>
      

    function  addCurrentRow(){
        var trcomp="<tr><td> <input type='file' name='imageFile'/></td><td><input name='imageName'></input></td><td><input name='note' /></td><td><a href='javascript:;' onclick='deleteCurrentRow(this);'><font color='red'>删除</font></a>  </td>";
     $("#allDatas tr:last-child").after(trcomp);
    }
    function  deleteCurrentRow(obj){
       var isDelete=confirm("真的要删除吗?"); 
   if(isDelete){
    var tr=obj.parentNode.parentNode;  
    var tbody=tr.parentNode;  
    tbody.removeChild(tr);  
   }
    }
 </script>
   </body>

</html>
 
分享到:
评论

相关推荐

    jQuery实现为table表格动态添加或删除tr功能示例

    本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考,具体如下: HTML页面元素如下: &lt;!-- 订单明细dialog --&gt; 销售订单明细 xss=removed&gt; &lt;table class=exhibit_table id=...

    JQuery动态添加删除table行.

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...

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

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

    jQuery+ajax实现动态添加表格tr td功能示例

    ### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时,我们经常需要动态地从服务器获取数据,并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...

    jQuery实现html table行Tr的复制、删除、计算功能

    本文实例讲述了jQuery实现html table行Tr的复制、删除、计算功能。分享给大家供大家参考,具体如下: 添加行: function addtr(){ var tr = $(#tb tr).eq(0).clone(); tr.appendTo(#tb); //tr.insertBefore(#tb ...

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

    本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...

    jQuery动态添加table

    本文将围绕“jQuery动态添加table”这一主题进行深入探讨,结合给出的资源,我们可以学习如何利用jQuery高效地在网页上动态创建和操作表格。 首先,我们来看“jQuery动态添加table”的基本概念。在网页设计中,...

    jquery table 添加、删除行、列

    本文将深入探讨如何使用jQuery实现表格的添加、删除行和列的功能,以便于动态更新和管理HTML表格内容。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素开始,包含若干`&lt;tr&gt;`(表格行)元素...

    jQuery删除table指定行

    在博客“jQuery删除table指定行”中,作者可能详细解释了这些概念,并可能提供了一些实际示例代码。通过阅读博客,你可以获得更深入的理解和实践指导。 总的来说,删除HTML表格中的指定行涉及到jQuery的选择器和DOM...

    jquery 添加、删除表格

    在表格上下文中,`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`是关键元素,我们需要操作它们来添加或删除行。 添加表格行时,可以创建一个新的`&lt;tr&gt;`元素,包含相应的`&lt;td&gt;`,然后使用`.append()`方法将其添加到`&lt;tbody&gt;`或特定的`...

    jQuery实现动态添加tr到table的方法

    在本文中,我们将深入探讨如何使用jQuery来动态地向HTML表格(table)中添加行(tr)。这个功能在处理用户输入、数据展示或构建交互式Web应用时非常常见。通过以下示例,我们可以看到如何结合JavaScript和jQuery实现...

    jquery添加删除行

    本主题将深入探讨如何使用jQuery实现表格中的行添加和删除功能,这对于动态交互的网页界面至关重要。 首先,我们需要了解HTML表格的基本结构。一个简单的表格由`&lt;table&gt;`标签定义,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`表示...

    jquery 表格 jquery table

    此外,还可以利用 jQuery 的动画效果为表格添加视觉上的交互性,比如在插入、删除或更新行时使用淡入淡出效果: ```javascript var $row = $(newRow); $row.hide().appendTo('#myTable tbody').fadeIn(); ``` 总的...

    jquery表格添加删除行点击按钮动态添加删除行

    本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能,这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行,可以提高用户的交互体验,使得数据管理更加灵活。 首先,我们需要创建一个基本的...

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

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

    JQuery 自定义 Table

    - 动态添加和删除行:使用`append()`添加行,使用`remove()`删除行。 - 表格排序:通过插件如`datatables.js`实现,或者自定义函数比较单元格内容进行排序。 - 数据筛选:使用`filter()`方法筛选符合特定条件的行...

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

    本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. 添加行 添加行通常涉及到在 `&lt;tbody&gt;` 标签内插入新的 `&lt;tr&gt;` 元素。可以使用 jQuery 的 `append()` 方法来完成: ```javascript // ...

    jQuery实现动态给table赋值的方法示例

    本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。 首先,我们需要一个基本的HTML结构,包含一个具有特定类和ID的table元素。在这个例子中,我们有一个layui...

    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; ...

Global site tag (gtag.js) - Google Analytics