【问题标题】:Add table row before or after a table row of known ID在已知 ID 的表格行之前或之后添加表格行
【发布时间】:2011-05-29 18:01:57
【问题描述】:

在这样的表中:

<table>
<!-- Insert Row of bun here -->
  <tr id="meat">
   <td>Hamburger</td>
  </tr>
<!-- Insert Row of bun here -->
</table>

function AddBefore(rowId){}
function AddAfter(rowId){}

我需要在不使用 jQuery 的情况下创建方法。我熟悉 jQuery 中的 append after 和 append before。但我坚持使用纯 js。

【问题讨论】:

    标签: javascript html html-table


    【解决方案1】:

    使用

    function AddBefore(rowId){
        var target = document.getElementById(rowId);
        var newElement = document.createElement('tr');
        target.parentNode.insertBefore(newElement, target);
        return newElement;
    }
    
    function AddAfter(rowId){
        var target = document.getElementById(rowId);
        var newElement = document.createElement('tr');
    
        target.parentNode.insertBefore(newElement, target.nextSibling );
        return newElement;
    }
    

    【讨论】:

    • @Gaby 您可能应该返回创建的行以便可以使用它。此外,无需使用appendChild;当第二个参数为 null 时,此功能包含在 insertBefore 中。
    • @Phrogz,我无法重现你所说的......见jsfiddle.net/gaby/d27wp
    • @Gaby: 我注意到 IE7/FF 中的 parentElement / parentNode 异常
    • @Perpetualcoder,parentNode 是跨浏览器之一。应该支持它就好了,因为它在 DOM 1 (msdn.microsoft.com/en-us/library/ms534328%28VS.85%29.aspx).. 会调查它..
    【解决方案2】:

    你想要insertBefore。与nextSibling 一起使用,在已知元素之后插入。

    【讨论】:

    猜你喜欢
    • 2017-06-18
    • 1970-01-01
    • 2017-03-06
    • 1970-01-01
    • 2020-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-28
    相关资源
    最近更新 更多