Tag Archives: Javascript - Page 2

Filter a table dynamically using JQuery

Posted by on May 15, 2014 No comments

Say you have a table that you would like to filter depending on a search word/s. Before JQuery this was quite a cumbersome task to solve this with javascript. Thanks to JQuery we can today with a few simple lines enable any table to be filtered. Let’s jump straight into it:

Here is the HTML for the table and search input field

<input id="sq" type="text">
 
<table id="ot">
  <thead>
    <tr>
      <th>Col 1</th><th>Col 2</th><th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td><td>Value 2</td><td>Value 3</td>
    </tr>
    <tr>
      <td>Value 4</td><td>Value 5</td><td>Value 6</td>
    </tr>;
    <tr>;
      <td>;Value 7</td><td>Value 8</td><td>Value 9</td>
    </tr>
  </tbody>
</table>

…and here is the code

$("#sq").keyup(function(){
  if($("#sq").val().length > 2){ 	
 
    $("#ot tr").not(":first").not(":contains("+$("#sq").val()+")").hide();
  }
  else {
    $("#ot tr").show();
  }
});

Lets explain a little:

  • We use the keyup function to trigger the filter event. It will fire every time we let go of a button but the search event will only happen if the search string is longer than 2 letters
  • The magic happens in the next line where we first get all rows (<tr>), except the first (which is the table header). We then find all rows NOT containing our search string and hide them using the JQuery hide() function. This way only the ones that actually contain our search string will be visible
  • Lastly we show every row if the search string is shorter than 3 letters

And that is it!

Tested on JQuery 1.9.1 and Chrome 34.0.1847.131

JQuery UI: Change theme dynamically using a drop-down

Posted by on April 17, 2014 4 comments

This is a neat pice of code to change the theme “live” on any site you build using css. I’m here going to use web links to the different css files but you can use any path, even local to get the css files

HTML:

<head> 
  <link id="stylesheet" rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
...
<select id="themes">
  <option value="http://code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">Le Frog</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">Start</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">Smoothness</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">Redmond</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">Sunny</option>
</select>  
...

First we put an id attribute into the link tab of the css link. This is so that we can easily find it later without selecting any other stylesheet links. Then we place the <select> with all the links in the <option> value attributes tags. No we are done with the HTML. Moving on to the javascript snippet

Javascript code:

$('#themes').change(function(){
  $("#stylesheet").attr({href : $('#themes').find(":selected").val()});
});

Here we just find the link object and changes the href attribute every time we change values in the <select>. And that is all!

Tested on Chrome 34.0.1847.116, JQuery 1.9.1 and JQueryUI 1.10.4

Create a countdown timer using setInterval

Posted by on April 7, 2011 6 comments

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 🙂