Question

A very basic question…

I have a jquery function that fires on page load:

$(document).ready(function () {
   // some code
   $('#filter').keyup(function() {

   });
}

The code filters the first column in a HTML table. I now want to filter by the nth column but I don’t want to write two very similar functions.

I can change the function to accept a single argument like so:

$(document).ready(function (column_num) {
   // some code
   $('#filter').keyup(function() {

   });
}

which is fine. However, how do I execute the function in my HTML file giving the function a single argument?

Answer 1

HTML:

Filter 1:<input type="text" class="filter" data-filter-column="1">
Filter 2:<input type="text" class="filter" data-filter-column="2">
Filter 3:<input type="text" class="filter" data-filter-column="3">

<div id="test"></div>

JavaScript:

$(document).ready(function () {
   $('.filter').keyup(function(e) {
       var column_num = $(this).attr("data-filter-column");
       var filter_token = $(this).val();
       //filterCol(column_num, filter_token); 
       $("#test").text("Filter column " + column_num + " by token " + filter_token);
   });
});

See demo here: http://jsfiddle.net/3cte4/2/