如何利用js实现删除表格每行的功能？

目录

InsCode项目运行代码 

1、利用html和css创建表格，js实现删除功能：

 源代码：

html部分：

css部分：

js部分：

2、利用js渲染表格，并实现删除功能：

源代码：

html部分：

css部分：

js部分：一定要包含在

之间，否则会打印多个表头！

---

InsCode项目运行代码 

1、利用html和css创建表格，js实现删除功能：

 源代码：

html部分：

    
    
    



    
css部分：
table {
            width: 600px;
            text-align: center;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            /* cursor: pointer; */
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
js部分：
2、利用js渲染表格，并实现删除功能：
源代码：
html部分：




    
    
    



    

        
学生列表
        

            
姓名
            
年龄
            
性别
            
操作
        
        

            
小明
            
18
            
男
            
删除
        
        

            
小美
            
20
            
女
            
删除
        
        

            
小米
            
21
            
男
            
删除
        
        

            
小华
            
16
            
男
            
删除
        
        

            
小梅
            
16
            
女
            
删除
        


 
   
   
   
   
   
   
   
  

    //添加js部分在table里面包裹，否则会重复打印表头部分
    

        
学生列表
        

            
姓名
            
年龄
            
性别
            
操作
        

css部分：

table {
            width: 600px;
            text-align: center;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            /* cursor: pointer; */
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }

js部分：一定要包含在之间，否则会打印多个表头！

                
                    小明
                    16
                    男
                    删除
                
            
                
                    小美
                    12
                    女
                    删除
                
            
                
                    小花
                    17
                    女
                    删除
                
            
                
                    小华
                    20
                    男
                    删除
                
            
                
                    小亮
                    22
                    男
                    删除
                
            
                
                    小李
                    18
                    男
                    删除