Question

I am trying to add an HTML block to a table(s) if more than 3 td elements are found, and not do anything if the table(s) have less than 3 td elements. I have looped through the tables, and have been able to check how many tds are in each table.

I have tried using .filter(); and $.each() but couldn’t crack it.

So: >> How do I only add the HTML to the Tables that passed the if > 3 statement ?

I am still learning JavaScript and jQuery so please bear with me.

here is the code so far:

var tbls = $("body").find("table.responsive").length;   
var data = Array();

for(var index = 0; index < tbls; index++){ 
    $("table.responsive").each(function(i, v){
        data[i] = Array();
        $(this).find("td").each(function(ii, vv){
            data[i][ii] = $(this).text();
    }); 
  })
}

data.forEach(function(item) { 
    if(item.length > 3) {

      //here I want to add the HTML, but it is applied to all tables
      $("table.responsive").before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
    return false;          
     } 
});​

Here is a demo: http://jsfiddle.net/design4lifeblog/gSPXu/15/

Answer 1

You don’t need to start traversing from body element and making an array for this, you can count the TDs in an each function.

$("table.responsive").​each(function(){
    if ( $('td', this).length > 3) {
       $(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
    }
})​