需要在htm页面中对生成的<li>进行排序的功能</li>

时间:2015-02-08 07:29:25

标签: javascript html css

我正在尝试整理一个电影列表网页,根据他们的#TITLE#按顺序列出所有电影。目前,该软件基于模板文件自动生成网页。下面是模板文件中列出电影的部分代码:

 <!-- Latest additions-->
#LATEST_ADDITIONS_START#
<div class="header">Movie Cover Listings</div>
#LATEST_ADDITIONS_TEMPLATE_START#
<li>
    <a href="movies/#INDEX#.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/#COVER#.jpg" width="#WIDTH#" height="#HEIGHT#"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">#TITLE#</td>
        </tr>
    </table>
</a>
</li>
#LATEST_ADDITIONS_TEMPLATE_END#
<div class="link_latest"><tr>#LATEST_ADDITIONS#</tr></div>
#LATEST_ADDITIONS_END#

<!-- All movies -->

这是程序使用模板文件从数据库生成的内容:

<!-- Latest additions-->

<div class="header">Movie Cover Listings</div>

<div class="link_latest"><tr>

<li>
    <a href="movies/2.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/000002.jpg" width="90" height="135"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">3 Days to Kill</td>
        </tr>
    </table>
</a>
</li>

<li>
    <a href="movies/1.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/000001.jpg" width="89" height="135"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">300: Rise of an Empire 3D</td>
        </tr>
    </table>
</a>
</li>
</tr></div>


<!-- All movies -->

如您所见,它按#INDEX#文件名以数字降序自动排序。我想按#TITLE#name按字母顺序排序。

有没有人知道如何做到这一点?

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

您将从后端数据库获取所有值,该数据库显示DESC file_name的降序中的所有值。

如果要按标题名称显示所有数据顺序,只需执行以下操作:

SELECT * FROM table_name ORDER BY title_name DESC

答案 1 :(得分:0)

如果可以在后端完成,我建议使用ORDER BY子句:

SELECT * FROM table_name ORDER BY title

这比在前端使用它更有效。 但由于问题只有与前端有关的标签:

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

//Easy to use...

sortUnorderedList("ID_OF_LIST");

参考: How may I sort a list alphabetically using jQuery?