用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>

我想这样做在JavaScript中不使用jQuery。我想要显示A1，B1，C1，D1 ..行作为第一行，然后是1,2,3,4行，然后是A，B，C，D行。

我知道在客户端会有一些等待时间，但我需要在客户端进行。有没有一些通用的解决方案来做到这一点，任何数量的行？

来源

2009-04-29 Ben

这与C＃有什么关系？至于在JS中的通用解决方案，它取决于你的意思是通用的（你举了一个例子，但没有说明它应该如何外推）。但是，一旦您了解JS DOM方法，这并不难。如果您仍然迷失，请提供您正在尝试实现的功能的签名，然后我们会尽力提供帮助。 – 2009-04-29 03:07:21

@Matthew因为这个问题意味着这与c＃无关，我认为这可能是另一种情况，提问者只是用项目中使用的技术进行标记。我删除了C＃标签。 – 2009-04-29 03:10:52

@Matthew和雷克斯... 我把它标记在c＃下，不是因为项目，而是假设使用javascript的最大用户会使用C＃。我只是想让这个问题达到更多的人。我希望你明白我想说的是什么。 – Ben 2009-04-29 03:42:05

在Javascript来解决这一点，最好的方法是：

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

现在添加一个隐藏的标签或文本框，它给出了服务器的排序顺序ie当页面呈现我想排序它所有的Tr的ID都以A开头应该排在第一，所有的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>

当页面renders..the顺序应该是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); 
}

我希望你们能明白我的意思..对我来说排序顺序总是来自服务器而不是来自用户的页面...

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

谢谢，本

来源

2009-05-02 16:13:23 Ben

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

<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节点。但我相信你可以从那里得到想法并加以改进。

来源

2009-04-29 03:09:49

务必：

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);

来源

2009-04-29 04:13:35 levik

用JavaScript重新排列表格

回答

相关问题