📌  相关文章
📜  如何在 jQuery 中添加编辑和删除表格行?

📅  最后修改于: 2021-11-03 10:06:21             🧑  作者: Mango

在本文中,我们将创建一个示例,说明如何在 jQuery 中添加、编辑和删除表格行。为了创建这个功能,我们需要了解 HTML 表格的基础知识,jQuery 基本功能。

表格行: HTML 表格是行和列的组合。表格行处于水平方向。在本节中,我们将借助一些基本的 jQuery 函数来修改表格行。

方法:

  1. 创建一个 HTML 表,其中包含卷号、班级、父亲的姓名、部分、标记字段。
  2. 最初,该表是空的,因此输出显示为“无学生记录”、“编辑”按钮和“添加新行”按钮。
  3. 使用 JavaScript 添加新行时,行对象会在最后一行之后被克隆。
  4. 可以删除任何行,这是通过使用 jQuery remove() 方法实现的,如代码所示。
  5. jQuery stopPropagation()event.stopImmediatePropagation() 方法用于停止事件调用的传播。
  6. 在代码的 CSS 部分,表格行和按钮设计与 CSS 淡入淡出动画效果一起使用@keyframes 规则处理

示例:我们来举例说明如何在 jQuery 中添加、编辑和删除表格行。我们创建了一个 HTML 表格,我们可以在其中借助基本的 jQuery函数动态执行添加、编辑和删除表格行等操作。

HTML


  

    
    
    
  
    

  

    

        How to add,edit and delete row          in Student Registration Table     

       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
Student RollnoNameClassFathers NameSectionMarks
                                                                                                                                                                                                                                                                                                                                                                                       
No Student Record
           Add one row         
           
                     
    
          


输出:

添加编辑删除行