Question

我尝试过使用stackoverflow中的多个示例，但由于某种原因，仍然无法在B之前将A显示在列表中。我想我需要另外一组眼睛。

<table>
 <tr id="CATEGORY_container">
  <td>b</td>
 </tr>
</table>

<tr id="EVENTNAME_container">
 <td>a</td>
</tr>

$(document).ready(function () {
    var oobTR = $('#CATEGORY_container');
    var extTR = $('#EVENTNAME_container');

    extTR.insertAfter(oobTR);
});

Answer 1

在你的小提琴中你缺少的是jQuery库在脚本之前包含它。虽然您的标记无效，但tr should be the child of any of these：table，thead，tfoot或tbody。

如果您尝试在tr包含a之前插入元素，请使用insertBefore()方法代替insertAfter()方法。

$(document).ready(function() {
  var oobTR = $('#CATEGORY_container');
  var extTR = $('#EVENTNAME_container');
  extTR.insertBefore(oobTR);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="CATEGORY_container">
    <td>b</td>
  </tr>
</table>
<table>
  <tr id="EVENTNAME_container">
    <td>a</td>
  </tr>
</table>

Answer 2

这是编辑过的小提琴。基本上我克隆了第一行并将其附加到表的末尾，然后删除第一行。 http://jsfiddle.net/wtkqzpj2/1/

        var oobTR = $('#ctrl_523210b6_acca_48f6_ab48_a3ffea4ce10e_CATEGORY_container').clone();
        var extTR = $('#ctrl_523210b6_acca_48f6_ab48_a3ffea4ce10e_EVENTNAME_container');
        $('#tab').append(oobTR);
$('#ctrl_523210b6_acca_48f6_ab48_a3ffea4ce10e_CATEGORY_container').remove();

Answer 3

当然你也可以跳过jQuery：

＆＃13;

function run(){
   var cat = document.querySelector('#categories tr');
   var evt = document.querySelector('#events tr');
   if(evt)
     cat.parentNode.insertBefore(evt,cat)
}

＆＃13;

<table id="categories">
  <tr>
    <td>b</td>
  </tr>
</table>
<table id="events">
  <tr>
    <td>a</td>
  </tr>
</table>

<button onclick="run();">Run</button>

＆＃13;

使用ID在表中的TR之后移动TR

3 个答案: