菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.JS HTML 排序


排序元素

w3.sortHTML(选择器)

排序列表

点击按钮按字母顺序排序列表

  • 奥斯陆
  • 斯德哥尔摩
  • Helsinki
  • Berlin
  • 罗马
  • Madrid

示例

<button onclick="w3.sortHTML('#id01', 'li')">排序</button>

<ul id="id01">
  <li>奥斯陆</li>
  <li>斯德哥尔摩</li>
  <li>赫尔辛基</li>
  <li>柏林</li>
  <li>罗马</li>
  <li>马德里</li>
</ul>
亲自尝试 » 使用 CSS »

排序表格

点击表格标题进行相应排序

名称 国家
Berglunds snabbkop Sweden
North/South UK
Alfreds Futterkiste Germany
Koniglich Essen Germany
Magazzini Alimentari Riuniti Italy
Paris specialites France
Island Trading UK
Laughing Bacchus Winecellars 加拿大

示例

<table id="myTable">
  <tr>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">名称</th>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">国家</th>
  </tr>
  <tr class="item">
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>UK</td>
    </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
...
</table>
亲自尝试 » 使用 CSS »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持