木偶转转转 2021-10-24 23:32 采纳率: 100%
浏览 67
已结题

javaScript相关table行数增加与删除

1.在页面上写一个table标签,写一个按钮,响应单击事件,调用一个函数,每单击一次,为table增加一行数剧据,单元格中内容任意
2.上述table中生成的每行尾部单元格内加一个删除链接,当点击次此链接时删除当前行(提示,使用parentNode,行节点是单元格节点的父,单元格节点是链接节点的父)

  • 写回答

2条回答 默认 最新

  • 关注

    你题目的解答代码如下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    
    </head>
    <body>
    
    <input type="text" id="text" value="添加的内容" /><input type="button" value="添加" onclick="addfunc();" /><br>
    <table id="tab" border="1">
        <tr>
            <th>数据</th>
            <th>操作</th>
        </tr>
        
    </table>
    
    <script type="text/javascript">
    function addfunc() {
        var tbody = document.querySelector("#tab tbody");
        var tr = document.createElement("tr");
        var text = document.getElementById("text").value;
        tr.innerHTML = '<td>'+text+'</td><td><input type="button" value="删除" onclick="delfunc(this);" /></td>';
        tbody.appendChild(tr);
        
    }
    function delfunc(t) {
        var tbody = document.querySelector("#tab tbody");
        tbody.removeChild(t.parentNode.parentNode);
        
    }
    </script>
    </body>
    </html>
    
    
    

    如有帮助,望采纳!谢谢!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月11日
  • 已采纳回答 12月3日
  • 创建了问题 10月24日

悬赏问题

  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决