如何在 jQuery 中添加编辑和删除表格行？

在本文中，我们将创建一个示例，说明如何在 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

  

    
    
    
    
  
    
        body {
            text-align: center;
            color: green;
        }
          
        .wrapper {
            width: 90%;
            margin: 5px auto;
        }
          
        .common {
            width: 100%;
            border: none;
        }
          
        .common thead th {
            background-color: #791515;
        }
          
        .trow:first-child {
            display: none;
            margin: 0 auto;
        }
          
        .trow input {
            border-radius: 5px;
        }
          
        .controls a {
            text-decoration: none;
            color: #791515;
        }
          
        .list_add {
            text-decoration: none;
            color: #791515;
        }
          
        .list_add:before {
            content: "\002b";
            color: white;
            border: 1px solid #791515;
            padding: 0 5px;
            border-radius: 5px;
            background-color: #791515;
            margin-right: 20px;
        }
          
        .action_btn {
            text-align: center;
        }
          
        .action_btn input {
            width: 120px;
            padding: 5px;
            border-radius: 10px;
            margin: 10px;
        }
          
        .action_btn input:first-child {
            background-color: #791515;
            color: white;
        }
          
        @keyframes fadeout {
            from {
                bottom: 30px;
                opacity: 1;
            }
            to {
                bottom: 0;
                opacity: 0;
            }
        }
          
        @keyframes fadein {
            from {
                bottom: 0;
                opacity: 0;
            }
            to {
                bottom: 30px;
                opacity: 1;
            }
        }
          
        .fa-times {
            font-size: 1rem;
        }
    

  

    
        How to add,edit and delete row 
        in Student Registration Table
    
  
    
        
            
                
                    
                    
                    
                    
                    
                    
                    
                
            
            
                
                    
                    
                    
                    
                    
                    
                    
                
  
                
                    
                
            
        Student RollnoNameClassFathers NameSectionMarks
                        
                            
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                            A
                            B
                            C
                        
                    
                        
                    No Student Record
  
        Add one row
        
  
        
            
        
    
  
    
        function addNewRow() {
            var template = $("tr.trow:first");
            $(".no_entries_row").css("display", "none");
            var newRow = template.clone();
            var lastRow = $("tr.trow:last").after(newRow);
  
            $(".list_cancel").on("click", function(event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
                $(this).closest("tr").remove();
                if ($(".list_cancel").length === 1) {
                    $(".no_entries_row")
                        .css("display", "inline-block");
                }
                console.log($(".list_cancel").length);
            });
            console.log($(".list_cancel").length);
            $("select.label").on("change", function(event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
                $(this).css("background-color", $(this).val());
            });
        }
  
        $("a.list_add").on("click", addNewRow);
    

  

输出：

添加编辑删除行