Category Archives: Javascript - Page 2

JQuery color every other row in a table

This is so simple and so useful that there is really no excuse to not to have this on your html tables, and it is pretty too 🙂

To change the color of every other row in a table simply add this code to an event that happens after the table has been created:

$("tr:odd").css("background-color", "#bbbbff")

The $(“tr:odd”) selects every tr row with an odd number and the .css() changes its color to #bbbbff – It is as simple as that

Tested on JQuery 1.9.1 and Chrome v28

JQuery sort table rows on column value

Sorting tables dynamically with javascript is often a smooth solution to your sorting problems. I’m here going to put a simple solution that I have been using for a while. I have in no means created this solution – I found it somewhere on the web and now I just want to put it here for easy access.

The table needs to have the following structure for this solution to work:

column1column2column3
value1value2value3
value4value5value6
value7value8value9

The critical parts here is that the table needs an id and a tbody. Without those the sorting will not work

Here is the JQuery code (standard JQuery, no plugins needed)

function sortTable(){
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {

  var A = $(a).children('td').eq(1).text().toUpperCase();
  var B = $(b).children('td').eq(1).text().toUpperCase();

  if(A < B) {
    return -1;
  }

  if(A > B) {
    return 1;
  }

  return 0;

  });

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}

To sort according to the second column we use ‘.eg(1)’ in row 6 and 7. Second column ‘.eg(3)’ and so on

Here is a JSFiddle of the solution: JQuery sort table rows on column value

Tested on Chrome v44.0.2403.155 (64-bit) and JQuery 1.9.1

Create a countdown timer using setInterval

SetInterval is a very usefull function when making webpages that should look ‘alive’. I am here going to make a countdown timer using the setInterval and clearInterval functions:

First we need two variables:

var clock = 10; //Start value of counter
var countdownId = 0; // Id of counter

Now we need the countdown function to call every interval:

function countdown() {
    if(clock > 0) {
        clock = clock - 1;
        document.getElementById('cdDiv').innerHTML = clock;
    }
    else {
        // Stop timer
        clearInterval(countdownId);
    }
}

Now we need a div to show the timer in:

<div id="cdDiv">10</div>

Now we put it all togheter:

<html>
  <head>
    <title>My little countdown timer</title>
    <script type="text/javascript">
        var clock = 10;
        var countdownId = 0;

        function start() {
            //Start clock
            countdownId = setInterval("countdown()", 1000);
        }

        function countdown(){
            if(clock > 0){
                clock = clock - 1;
                document.getElementById('cdDiv').innerHTML = clock;
            }
            else {
                //Stop clock
                clearInterval(countdownId);
            }
        }
    </script>
  </head>
  <body onload="start()">
      <div id="cdDiv">10</div>
  </body>
</html>

This small example is mostly so I remember the clearInterval function name which keeps escaping me 🙂