qq_29763559
liuleng68
2018-04-13 10:23
采纳率: 62.5%
浏览 3.3k
已采纳

table中动态给tr添加td模块

现在有个问题,通过append("<td>...</td>");这种形式,页面上显示Object.
通过appendChild()方式,又不好添加。尝试用(已经获取了按钮对应的tr元素)tr.item(tr.length-2).appendChild(),
却发现添加的在按钮前面那个“x”的td里面.图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • qq_38854852
    qq_38854852 2018-04-13 11:45
    已采纳

    假定要点击的按钮id为btn,td父级元素id为tr

    var add_table = documet.getElementById("btn");
    var tr = documet.getElementById("tr");
    add_table.addEventListener("click",function(){
    tr.appendChild("

    ");
    },false);
    这样就能实现每次点击都动态添加td
    点赞 评论
  • xiaojun1111
    xiaojun1111 2018-04-13 10:30

    不错,值得学习不错,值得学习

    点赞 评论
  • chunlei123
    chunlei123 2018-04-13 11:02

    非常有学习价值,动态给tr添加td

    点赞 评论
  • qq_38854852
    qq_38854852 2018-04-13 11:50

    我去,appendChild("");的内容为《td》《/td》,,,原谅我用中文的书名号,英文下会被当成标签执行,显示不出来

    点赞 评论
  • houninghhh
    BizarreMotley 2018-04-13 15:09

    希望楼主把html代码贴出来,这样更有助于其他人帮助您解决问题
    我的思路是还要看下这个btn按钮是不是在那个table里面,同时还要看是不是每一行都是一个独立的table,然后如果不是当你添加其中一行必然下面
    的那一行也是会受到影响的,所以你其余的行数默认最后一列要执行添加跨列属性来保持样式。暂时看不到你的代码,无法提供清晰的思路去解决,可能是我tooyoungtoosimple了嘿嘿

    点赞 评论
  • qq_29763559
    liuleng68 2018-04-14 14:29

    这个问题,楼主已经找到了一个勉勉强强的答案。下面给大家介绍下,权当参考。
    问题描述:点击新增,弹出模态框,录入值,动态在对应的tr中添加td,并在td中创建一个input标签,把录入的值传递给input。
    //前面弹出模态框就不说了,网上其他的资料已经很详细了。
    //这个函数,是点击模态框保存按钮触发的。
    function addnewRowValue() {
    //在点击新增按钮时,会调用一个函数,把按钮的id值传递给一个input(hidden)保存。
    //buttonId代表新增按钮的id值(确定是哪一行的新增按钮)
    var buttonId = document.getElementById('clickButtonId').value;
    //获取模态框中录入的值
    var rowValue = $("#rowValue").val();
    //创建一个td节点,并书写样式
    var tdNode1 = document.createElement("td");
    tdNode1.style = "width:10%;";
    //创建一个input节点,并录入属性和值
    var inputNode = document.createElement("input");
    inputNode.type ="text";
    inputNode.value = rowValue;
    inputNode.setAttribute("class","form-control");
    //将input节点加入到td中
    tdNode1.appendChild(inputNode);
    //关闭的符号
    var tdNode2 = document.createElement("td");
    var textNode = document.createTextNode("×");
    tdNode2.style = "width:2%;";
    tdNode2.appendChild(textNode);
    //隐藏模态框
    $('#addNewValueModal').modal('hide');
    //获取新增按钮对应的td和tr
    var td = document.getElementById(buttonId).parentNode;
    var tr = td.parentNode;
    //按钮存在的节点数
    var tdLen =td.childNodes.length;
    //在tr中新增按钮前,插入节点
    tr.insertBefore(tdNode1,tr.childNodes[tr.childNodes.length-tdLen]);
    tr.insertBefore(tdNode2,tr.childNodes[tr.childNodes.length-tdLen]);
    }
    这样就能够实现在tr中动态添加td。
    新的问题:图片说明
    td的样式失效了。
    这个问题,谁有答案?

    点赞 评论
  • qq_29763559
    liuleng68 2018-04-14 14:50

    样式问题已经解决了,是我本地css问题。大家用的时候,tr中原先有的td别加style设置长度即可。图片说明

    点赞 评论

相关推荐