CODEWITHSUNDEEP
javascriptjqueryhtmlxslt
corkwood
corkwood

Reputation: 1

Using JQuery to hide columns with no data (including header) with same table ids

I have a xslt template that creates HTML tables based off an element attribute. The template ids the table as detailTable. I can have several tables with this same id. I'm using jQuery to hide columns including THs with no data. My problem is how do I get the jQuery to find each table. I can get the following code to work on one table, but it doesn't work if there is more than one table. jQuery code is below:

$(document).ready(function() {
    $('#detailTable th').each(function(i) {
        var remove = 0;                           
        var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
        tds.each(function(j) { if (this.innerHTML == '') remove++; });

        if (remove == ($('#detailTable tr').length - 1)) {
            $(this).hide();
            tds.hide();
        }                           
    });
});

Upvotes: 0

Views: 771

Answers (3)

Grinn
Grinn

Reputation: 5543

The problem is probably that you have multiple tables with the same ID. That's a no-no. Instead of using the id attribute, use name and change $('#detailTable th') to $('table[name=detailTable] th')

EDIT:

Since your XSLT is defining that the ID needs to be used, all that I can think to try (if you can't mod your XSLT) is to reference your tables in some other way. It might be a good idea to remove their ID's while you're at it - or change them to the name attribute instead, as I've done below:

$(document).ready(function() {
    $('table th').each(function(i) {
        var tbl = $(this).closest("table");
        if(tbl.attr("id") == "detailTable") {
            tbl.removeAttr("id").attr("name", "detailTable");
            var remove = 0;                           
            var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
            tds.each(function(j) { if (this.innerHTML == '') remove++; });

            if (remove == ($('#detailTable tr').length - 1)) {
                $(this).hide();
                tds.hide();
            }                           
        }
    });
});

Note that I just wrote this in the SO editor, so it might need some tweaking but you should get the idea.

Upvotes: 0

twgoff
twgoff

Reputation: 5

I believe it is because you have many tables with the same id.

Change the id to a class and try it.

You really shouldn't use the same id more than once.

Upvotes: 0

Vic
Vic

Reputation: 8991

Why would you have several tables with the same id? Try giving them a class instead and then you can do:

$('.detailTable th').each(function(i) {
    // code here...
});

Upvotes: 1

Related Questions