Question

我想使用JavaScript重新排序表格行。

例如，

采用以下虚拟表：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
  </tr>
</table>

我想在不使用jQuery的情况下在JavaScript中执行此操作。我想将A1，B1，C1，D1 ..行显示为第一行，然后是1,2,3,4行，然后是A，B，C，D行。

我知道客户端会有一些等待时间，但我需要在客户端进行。对于任意数量的行，是否有一些通用的解决方案？

Answer 1

如果我理解正确，你问的是如何取最后一行并将其作为第一行，按下其余部分。这应该这样做：

<table id="mytable">
...
</table>

<script type="text/javascript">
    var tbl = document.getElementById('mytable');
    var rows = tbl.getElementsByTagName('tr');
    var firstRow = rows[0];
    var lastRow = rows[rows.length];
    firstRow.parentNode.insertBefore(lastRow.parentNode.removeChild(lastRow), firstRow);
</script>

假设您的表没有嵌套表。在这一点上，这需要更聪明一些。这也假设您没有使用TBODY和THEAD节点。但我相信你可以从中获得想法并加强它。

Answer 2

在Javascript中解决此问题的最佳方法是：

给Tr ..一个唯一的名字。例如：X_Y，X_Z，A_Y，A_Z

现在添加一个隐藏的标签或文本框，它给出了服务器的排序顺序，即当页面呈现时我要对它进行排序所有具有以A开头的ID的Tr应该首先出现，而所有的Z应该排在第二位。

<asp:label id="lblFirstSortOrder" runat="server" style="display:none;">A,X</label>
<asp:label id="lblSecondSortOrder" runat="server" style="display:none;">Z,Y</label>

当页面呈现时......订单应为A_Z，A_Y，X_Z，X_Y

在渲染之前，这是来自aspx文件的表：

<table>
<tr id='Tr_Heading'>
  <td>A</td>
  <td>B</td>
</tr>
<tr id="Tr_X_Y">
  <td>GH</td>
  <td>GH1</td>
</tr>
<tr id="tr_X_Z">
  <td>HU</td>
  <td>HU1</td>
</tr>
<tr id="tr_A_Z">
  <td>JI</td>
  <td>JI1</td>
</tr>
<tr id="tr_A_Y">
  <td>JI</td>
  <td>JI1</td>
</tr>

脚本：

function SortAndArrange()
{
var firstList = document.getElementById('lblFirstSortOrder').value;
var secondList = document.getElementById('lblSecondSortOrder').value;
var firstTypes = new Array();
firstTypes = firstList.split(',');
var secondLists = new Array();
secondLists = secondList.split(',');
var refNode = document.getElementById('Tbl_' + firstTypes[0] + "_" + secondTypes[0]);
for (var i = 0; i<firstTypes.length; i++)
{
  for (var j = 0; j< secondTypes.length;j++)
  {
     var TrName = 'Tbl_'+firstTypes[i]+'_'+secondTypes[j];
     var FirstSecondTrs = document.getElementById(TrName);
     if (FirstSecondTrs)
     {
       FirstSecondTrs.parentNode.removeChild(FirstSecondTrs);        
       insertAfter(refNode,FirstSecondTrs);
       refNode = FirstSecondTrs;
     }
  }
 }
}
function insertAfter( referenceNode, newNode )
{   
 referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
}

我希望你们能得到这个想法..对我来说，排序顺序总是来自服务器，而不是来自页面的用户......

非常感谢所有的答案..赞美它。帮助我找到了这个解决方案。

谢谢，本

Answer 3

执行：

var table = ...; // Get reference to table (by ID or other means)
var lastRow = table.rows[table.rows.length - 1];
lastRow.parent.insertBefore(table.rows[0], lastRow);

在JavaScript中重新排列表

3 个答案: