javascript - 如何使用 Javascript 对表格行进行排序

Question

描述

表格行必须在表格中的任意位置交换，即行 i 和行 j 必须改变位置，其中 i 和 < em>j不一定相邻。请参阅下面的当前实现。表格行应按列排序；列由 sort_index 指定，它是通过按表头之一生成的。

实现的问题在于表格是通过每次点击标题进行递增排序的，而它应该通过一次点击进行排序。

var table_index = {
    watched: 0,
    title: 1,
    director: 2,
    year: 3
};

var sort_index = 0;

$(document).ready(function()
{
    var table_headers = document.getElementById("header-item").children;
    for (var k = 0; k < table_headers.length; k++)
    {
        $("#" + table_headers[k].id).bind("click", function(e)
        {
            sort_index = table_index[e.target.id];
            var table = document.getElementById("film-list");
            for (var i = 1; i < table.rows.length - 1; i++)
            {
                var a = table.rows[i].getElementsByTagName("td")[sort_index].innerHTML;
                for (var j = i + 1; j < table.rows.length; j++)
                {
                    var b = table.rows[j].getElementsByTagName("td")[sort_index].innerHTML;
                    var swap = 0;
                    switch (sort_index)
                    {
                    // Alphabetic sort
                    case 0:
                    case 1:
                    case 2:
                        if (b.toLowerCase() < a.toLowerCase())
                            swap = 1;
                        break;
                    // Numeric sort
                    case 3:
                        if (b - a < 0)
                            swap = 1;
                        break;
                    }
                    if (swap == 1)
                    {
                        $(".row-item").eq(i - 1).after(table.rows[j]);
                        $(".row-item").eq(j - 1).after(table.rows[i]);
                    }
                }
            }
        });
    }
});

编辑

看来真正的问题与循环内的闭包有关。单击标题时，只有最后一个表行交换在 DOM 中实际更新，因此需要多次单击才能正确排序表。

我将发布我自己的解决方案，以澄清真正的问题。

Answer 1

我同意 Mr Polywhirl在 DOM 本身中执行此操作可能并不理想(尽管完全有可能，请参见下文)。现代 Web 开发倾向于使用模型/ View / Controller 样式的架构(各种类型)，其中您的模型(您的实际数据)与它的 View (DOM)和 Controller (浏览器、DOM 和你的代码一起运行)，它对你的模型采取行动(然后反射(reflect)在 View 中)。有许多流行的 MVC 风格的框架，在我写这篇文章时最重要的(它会随着时间而变化)可能是 React , Vue.js , 和 Angular .我在下面包含了一个 React 示例。

但同样，您可以直接在 DOM 上执行此操作。我看到你在使用 jQuery，所以我在下面使用了它——查看内嵌评论。

// Hook `click` on the table header, but only call our callback if
// that click passes through a `th`
$(".sortable thead").on("click", "th", function() {
    // Which column is this?
    var index = $(this).index();
    
    // Get the tbody
    var tbody = $(this).closest("table").find("tbody");
    
    // Disconnect the rows and get them as an array
    var rows = tbody.children().detach().get();
    
    // Sort it
    rows.sort(function(left, right) {
      // Get the text of the relevant td from left and right
      var $left = $(left).children().eq(index);
      var $right = $(right).children().eq(index);
      return $left.text().localeCompare($right.text());
    });
    
    // Put them back in the tbody
    tbody.append(rows);
});

td, th {
  padding: 4px;
}
th {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid #ddd;
}

To sort the rows alphabetically by a column's contents, click its header.
<table class="sortable">
  <thead>
    <th>English</th>
    <th>Spanish</th>
    <th>Italian</th>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td>Uno</td>
      <td>Uno</td>
    </tr>
    <tr>
      <td>Two</td>
      <td>Dos</td>
      <td>Due</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Tres</td>
      <td>Tre</td>
    </tr>
    <tr>
      <td>Four</td>
      <td>Cuatro</td>
      <td>Quattro</td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

它可以更短一些，但我想要清楚而不是过于简洁。

请注意，这会删除行，对它们进行排序，然后将它们放回去，而不是导致各种就地 DOM 修改。

这是 React 示例:

// A React "component" for the table
class MyTable extends React.Component {
    // Initializes the component
    constructor(props) {
        super(props);
        this.state = {
            // Start out unsorted, copying the array (but reusing the entries, as `row`
            // properties -- we do that so we can use their original index as a key)
            sorted: props.data.map((row, index) => ({index, row})),
            sortKey: null
        };
    }
    
    // Sort the view
    sort(by) {
        // Update state...
        this.setState(({sorted, sortKey}) => {
            if (sortKey === by) {
                // ...no update needed, already sorting this way
                return;
            }
            // Copy the array, then sort it (never change state in place)
            sorted = sorted.slice();
            sorted.sort((left, right) => left.row[by].localeCompare(right.row[by]));
            // Return the state updates
            return {sorted, sortKey: by};
        });
    }
    
    // Render the component per current state
    render() {
        const {sorted} = this.state;
        const {headers} = this.props;
        return (
            <table className="sortable">
                <thead>
                    {headers.map(({title, lang}) => <th key={lang} onClick={() => this.sort(lang)}>{title}</th>)}
                </thead>
                <tbody>
                    {sorted.map(({row, index}) =>
                        <tr key={index}>
                        {headers.map(({lang}) => <td key={lang}>{row[lang]}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }
}

// Mount the component
ReactDOM.render(
    <MyTable
        headers={[
            {title: "English", lang: "en"},
            {title: "Spanish", lang: "es"},
            {title: "Italian", lang: "it"}
        ]}
        data={[
            {en: "One", es: "Uno", it: "Uno"},
            {en: "Two", es: "Dos", it: "Due"},
            {en: "Three", es: "Tres", it: "Tre"},
            {en: "Four", es: "Cuatro", it: "Quattro"}
        ]}
    />,
    document.getElementById("root")
);

td, th {
  padding: 4px;
}
th {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid #ddd;
}

To sort the rows alphabetically by a column's contents, click its header.
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

它使用了各种 ES2015+ 特性，例如解构、箭头函数和速记属性；并且还使用 JSX 语法(这不是 JavaScript 功能；它由代码段中的 Babel 处理)。