Tag Archive for: table

Basics of browser database with Web SQL

/in , , /by

In the next example we are going to create a database (to save people parameters for example), insert and replace element, delete a table, and show data from database itself.

You can add new people data using the inputs and pressing “Save in database”, if the inputs have a red border it means you need to fill in before saving.

Sort by table content

/in , /by

table

How can you sort any HTML table using jQuery?

Element 40 ✔
Element 2 ✔
Element 29 ✔
Element 28 ✔
Element 5 ✔

Suppose you only want to use the number.

  1. First we must sort elements
  2. After that we have to keep going deleting each element and appending again to the table with the new order
// JS
$("table tr").sort(function (a, b) {
    var a_num = $(a).children(":first-child").text().split(" ")[1];
    var b_num = $(b).children(":first-child").text().split(" ")[1];
    return parseInt(a_num) - parseInt(b_num);
}).each(function(){
    var elem = $(this);
    elem.remove();
    $(elem).appendTo("table > tbody");
});

See a real example:

Edited: improved and without jQuery.