< p >JavaScript 自動排序是一種非常實用的技術，在Web應用程序中常用于在表格中按照某一列進行排序。以圖書銷售網(wǎng)站為例，用戶可以輕松地按照圖書價格或出版日期等因素進行排序，使他們更方便地找到所需的信息。本文將介紹一些基本的 JavaScript 代碼，以幫助你編寫自己的自動排序功能。< /p >< p >首先，我們需要一個用于存儲要排序數(shù)據(jù)的數(shù)組，并使用下面的代碼將其初始化。此處我們使用了一些隨機生成的數(shù)據(jù)來測試函數(shù)的功能。< /p >< pre >var bookList = [
{ name: 'Harry Potter', price: 20.00, publish_date: '2005-01-12' },
{ name: 'Lord of the Rings', price: 25.99, publish_date: '1995-12-02' },
{ name: 'The Hobbit', price: 18.50, publish_date: '2010-08-17' },
{ name: 'Java for Dummies', price: 14.95, publish_date: '2009-05-21' },
{ name: 'Javascript: The Good Parts', price: 30.00, publish_date: '2013-11-07' },
];< /pre >< p >接下來，我們需要編寫一個函數(shù)來對數(shù)組進行排序。下面的代碼使用 Javascript 的 sort() 方法來對書籍列表按照價格進行排序，我們也可以通過修改比較函數(shù)的參數(shù)，實現(xiàn)對圖書出版日期的排序。< /p >< pre >function sortByPrice() {
bookList.sort(function(a, b) {
return a.price - b.price; //升序排序
});
}
sortByPrice();< /pre >< p >現(xiàn)在，我們已經(jīng)成功排序了圖書列表。但是，我們還需要將排序結(jié)果呈現(xiàn)給用戶。為此，我們可以使用 JavaScript 的 DOM 操作，通過創(chuàng)建 HTML 元素來顯示經(jīng)過排序后的圖書列表。下面是實現(xiàn)此操作的代碼示例。< /p >< pre >var bookTable = document.getElementById('book-table');
bookTable.innerHTML = '';
for (var i = 0; i< bookList.length; i++) {
var tr = document.createElement('tr');
tr.innerHTML =
'' + bookList[i].name + ' ' +
'' + bookList[i].price + ' ' +
'' + bookList[i].publish_date + ' ';
bookTable.appendChild(tr);
}< /pre >< p >在這個例子中，我們首先通過獲取具有"id"屬性的HTML表格元素來將表格的內(nèi)容清空。然后，我們遍歷在第一步中已經(jīng)排序的圖書列表并創(chuàng)建一個 table row (tr) 元素。接著，我們將每本書的信息添加到 tr 元素中，并使用 appendChild() 方法將其添加到表格中。< /p >< p >這只是基本的JavaScript 自動排序功能的介紹。我們可以通過將自動排序與其他交互式組件（如搜索框）相結(jié)合，從而提高用戶體驗。有關高級排序技術，如按多個列排序，您可以在這篇文章中繼續(xù)學習。< /p >
下一篇php nohup