使用JavaScript选择表中的列并对其进行排序 [英] Select and sort a column in a table using Javascript

问题描述

我想选择一个表的特定列并使用Javascript(没有框架或插件)对它进行相应的排序.有人可以帮我吗?

I want to select a particular column of a table and sort it accordingly using Javascript (No frameworks or plugins). Could anyone help me regarding this?

<table>
        <thead>
            <tr>
                <td>Col1</td>
                <td>Col2</td>
                <td>Col3</td>
                <td>Col4</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data11</td>
                <td>Data23</td>
                <td>Data53</td>
                <td>Data45</td>
            </tr>
            <tr>
                <td>Data81</td>
                <td>Data42</td>
                <td>Data33</td>
                <td>Data4854</td>
            </tr> 
            <tr>
                <td>Data84681</td>
                <td>Data452</td>
                <td>Data354</td>
                <td>Data448</td>
            </tr> 
            <tr>
                <td>Data1846</td>
                <td>Data25635</td>
                <td>Data3232</td>
                <td>Data44378</td>
            </tr> 
        </tbody>
    </table>

推荐答案

function sortTableByColumn(tableId,columnNumber) { // (string,integer)
  var tableElement=document.getElementById(tableId);
  [].slice.call(tableElement.tBodies[0].rows).sort(function(a, b) {
    return (
      a.cells[columnNumber-1].textContent<b.cells[columnNumber-1].textContent?-1:
      a.cells[columnNumber-1].textContent>b.cells[columnNumber-1].textContent?1:
      0);
  }).forEach(function(val, index) {
    tableElement.tBodies[0].appendChild(val);
  });
}

在您的页面中，将id添加到表格标记:

In your page, add id to the table tag:

<table id="myTable">

使用javascript，使用:

From javascript, use:

sortTableByColumn("myTable",3);

使用

tBodies [0] 是因为可以有很多.在您的示例中，只有一个.

tBodies[0] is used because there can be many. In your example there is only one.

如果我们有 var arr = [123,456,789] ，则 [].slice.call(arr)返回arr的副本.

If we have var arr=[123,456,789], [].slice.call(arr) returns a copy of arr.

我们正在向它提供html-rows-collection，该集合可在 tableElement 的 tBodies [0] 中找到.

We're feeding it the html-rows-collection, found in tBodies[0] of tableElement.

然后，我们使用一个内联函数对该数组进行排序，该函数比较两个数组元素，在这里是:行(< tr> ).

Then, we sort that array with an inline function that compares two array elements, here: rows (<tr>).

使用 cells [columnNumber] ，我们访问< td> s和 textContent 来访问文本内容.我使用了 columnNumber-1 ，因此您可以在第三列而不是2处输入3，因为数组(第1列)的第一个元素的索引为0 ...

Using cells[columnNumber] we access the <td>s, and textContent to access the text content. I've used columnNumber-1 so you can enter 3 for third column instead of 2, because the index of first element of an array (column 1) is 0...

forEach 遍历数组的所有元素(到现在为止)，并且 appendChild 行到达tBody.因为它已经存在，所以只将其移到末尾:将最低的值移到末尾，然后将第二低的值移到(新)末尾，直到最后以最高值结束.

The forEach goes through the elements of the array, which is by now in order, and appendChild row to the tBody. Because it already exist, it just moves it to the end: moving the lowest value to the end, then moving the second lowest to the (new) end, until it ends with the highest value, at the end.

我希望这就是你想要的.如果是这样，请尽情享受！

I hope this is what you want. If so, enjoy!

这篇关于使用JavaScript选择表中的列并对其进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！