zoukankan      html  css  js  c++  java
  • js动态删除表格中的某一行

    js动态删除表格中的某一行

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动态创建的表格有删除功能,可以删除表格中的某一项</title>
        <style>
            #tab{
                margin-top: 20px;
            }
            #tab tr td{
                 140px;
                height: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
         <form action="">
        <input type="text" name="" id="txt1" value="张三">
        <input type="text" name="" id="txt2" value="男">
        <input type="text" name="" id="txt3" value="22">
        <input type="button" name="" id="btn" value="添加">
    
        <table  border="1px" id="tab" cellpadding=0 cellspacing=0 >
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </table>
    </form>
    </body>
    <script>
        var txt1=document.querySelector("#txt1")
        var txt2=document.getElementById("txt2")
        var txt3=document.getElementById("txt3")
        var tab=document.getElementById("tab")
        btn.onclick=function(){
            var tr=document.createElement("tr")
                tab.appendChild(tr) 
            var td1=document.createElement("td")
            var td2=document.createElement("td")
            var td3=document.createElement("td")
            var td4=document.createElement("td")
                tr.appendChild(td1)
                tr.appendChild(td2)
                tr.appendChild(td3)
                tr.appendChild(td4)
                td1.innerHTML=txt1.value
                td2.innerHTML=txt2.value
                td3.innerHTML=txt3.value 
                td4.innerHTML="删除"  
    
            td4.onclick=function(){
                    tr.remove()
            }
     
      
    }
    </script>
    </html>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    JDBC编程步奏、问题总结(一)
    基于注解的Spring AOP的配置和使用--转载
    什么是aop?-------转
    The JSP specification requires that an attribute name is preceded by whitespace--异常
    使用注解来构造IoC容器-转
    Java单元测试(Junit+Mock+代码覆盖率)---------转
    Linux 杂项
    Sequence
    vim编辑器高亮sv语法
    linux 权限 chmod 755
  • 原文地址:https://www.cnblogs.com/cupid10/p/12880796.html
Copyright © 2011-2022 走看看