defining events for data validation in table cells jquery

Question

Hi,

I am trying to validate data in the table cell when the user enters the information. Each cell in the table will have different validation methods. I have a table with 15 cells and 100 rows. some of the cells will be hidden based on some settings. so I cannot use cellIndex to define events. so to define validation rules on each cell this is what I did

jQuery(function ($) {
$('table#<%= MyTable.ClientID %> tr td input[type=text]').filter('input[id*=tCell1]')
                    .bind('blur', validateCell1);    
$('table#<%= MyTable.ClientID %> tr td input[type=text]').filter('input[id*=tCell2]')
                    .bind('blur', ValidateCell2);     
$('table#<%= MyTable.ClientID %> tr td input[type=text]').filter('input[id*=tCell3]')
                    .bind('blur', ValidateCell3);         
$('table#<%= MyTable.ClientID %> tr td input[type=text]').filter('input[id*=tCell4],input[id*=tCell5]')
                    .bind('blur', ValidateCell4and5); 
});

since I am attaching "onblur" event on each cell, it is loading slow. Is there any other way for this?

Thanks, sridhar.

Answer 1

Instead of using redundant wildcard attribute filters (like input[id*=tCell1]) which tend to slow things down, try selecting elements more directly. If you know the positions of the elements beforehand, it should not be a problem. For example:

$("table tr").each(function() {
    $(this).find("td:eq(0) input[type=text]").bind('blur', validateCell1);
    $(this).find("td:eq(1) input[type=text]").bind('blur', validateCell2);
    $(this).find("td:eq(3) input[type=text]").bind('blur', validateCell3);
    $(this).find("td:eq(4) input[type=text]").bind('blur', ValidateCell4and5);
    $(this).find("td:eq(5) input[type=text]").bind('blur', ValidateCell4and5);
});

Also, I don't think there is any need to use filter. A well thought-out selector should be enough.

Answer 2

you can try with classes:

$(".classMyTable tbody tr").each(function() {
    $(".classMyInput_1", $(this)).bind('blur', validateCell1);
    $(".classMyInput_2", $(this)).bind('blur', validateCell2);
    $(".classMyInput_3", $(this)).bind('blur', validateCell3);
    $(".classMyInput_4, .classMyInput_5", $(this)).bind('blur', ValidateCell4and5);
});

if this solution serves you, you should take as @karim79 correct response because it is based on.