Clasificación HTML de W3.JS


Ordenar elementos:

w3.sortHTML(selector)

Ordenar listas

Haga clic en el botón para ordenar la lista alfabéticamente:

  • Oslo
  • Estocolmo
  • helsinki
  • Berlina
  • Roma
  • Madrid

Ejemplo

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

<ul id="id01">
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
</ul>

Ordenar tablas

Haga clic en los encabezados de la tabla para ordenar la tabla en consecuencia:

Nombre País
La taza rápida de Berglund Suecia
Norte Sur Reino Unido
Caja de alimentación de Alfred Alemania
comida real Alemania
Almacenes de alimentos reunidos Italia
Especialidades de París Francia
Comercio de la isla Reino Unido
Laughing Bacchus Winecellars Canadá

Ejemplo

<table id="myTable">
  <tr>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">Name</th>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</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>