Jquery: combine table cells variably based on their content

Question

I have a table which contains three columns like this:

Amount | Upper banding | Lower banding

Each cell in the various columns has a css class applied (so cells in the 'amount' column have the class 'amount' and so on).

<table>
<tbody>
<tr>
<th class="amount">Amount</th>
<th class="upperBand">Upper banding</th>
<th class="lowerBand">Lower banding</th>
</tr>
<td>
<td class="amount">Amount</td>
<td class="upperBand">Upper banding</td>
<td class="lowerBand">Lower banding</td>
</tr>
...
</tbody>
</table>

The values for these columns are drawn from a database: wherever an exact amount is contained in the database the cell in the 'amount' column is populated, whenever a upper band is available the cell in the 'upper banding' column is populated, and so on. (A general rule-of-thumb is that whenever an exact amount is available no bands will be present, so if 'amount' is populated the other two cells will always be blank, i.e. contain a non-breaking space.)

I want to combine the upper and lower banding cells into the 'amount' cell, in the following way:

if the 'amount' cell is populated, leave it as it is
if both the 'upper banding' and 'lower banding' cells are populated, the 'amount' cell should read "[upper banding value]-[lower banding value]"
if only the 'upper banding' cell is populated, the 'amount' cell should read "Up to [upper banding value]"
if only the 'lower banding' cell is populated, the 'amount' cell should read "At least [lower banding value]"
if all three cells contain non-breaking spaces, leave the 'amount' cell as it is

Can anyone tell me how to accomplish this with JQuery? I gather it'll require a series of 'if' statements, but my meager JQ skills ain't up to the task.

EDIT

It's probably worthwhile pointing out that I've attempted to do this several different ways, none of which have worked. I'd be happy simply to be pointed in the right direction, as in being told what JQ functions to make use of - I don't expect anyone to write my code for me.

Please give it a try rather than asking someone to write your code (or pseudo-code) for you. — isherwood
@isherwood - thanks for the input. I'm asking the question because I have attempted several approaches but, as said, my meager JQ skills aren't up to the task. Why waste space with my past attempts that simply don't work? — shngrdnr
Because 1) that shows us that you've made an effort, 2) you might be closer than you think, 3) there's probably something to be learned from it and 4) space doesn't cost. — isherwood
@isherwood - ha, well, that's fair enough. I have to admit most of my efforts have been so abortive that it hardly seems worth posting the code (if only to spare my blushes and everyone's else facepalms) - and I feel I'm definitely not close with this. Let me see what I cobble together from my past efforts and I'll post it. — shngrdnr
@isherwood - Oh, hang on, the question's been answered. Still, you make good points isherwood, it's all a learning curve isn't it? I'll bear what you said in mind next time I post. — shngrdnr

JF it JF it · Accepted Answer · 2014-03-05T14:36:05

Please see this fiddle.. http://jsfiddle.net/ntk3x/

I color coded so you know what condition was hit..

$.fn.isNullOrEmpty = function () {
if ($.trim($(this).html()).length == 0) {
    return true;
} else {
    return false;
}
}

$.fn.getAmount = function () {
return $(this).find('td.amount');
}
$.fn.getUpper = function () {
return $(this).find('td.upperBand');
}
$.fn.getLower = function () {
return $(this).find('td.lowerBand');
}

$(document).ready(function () {
console.log('-----------NewTest-----------');
$.each($('table tr:not(:first)'), function (ind, val) {
    var amt = true, upr = true, low = true;
    if ($(val).getAmount().isNullOrEmpty()) {
        amt = false;
        $(val).getAmount().css('background-color', 'red');
    }
    if ($(val).getUpper().isNullOrEmpty()) {
        upr = false;
        $(val).getUpper().css('background-color', 'red');
    }
    if ($(val).getLower().isNullOrEmpty()) {
        low = false;
        $(val).getLower().css('background-color', 'red');
    }


    if(amt && upr && low){
        console.log('all good in the hood')
        $(val).css('background-color', 'green');
    }


    if(!amt)//noamount
    if(upr&&low)
    { //bothlow+high
        var x = $(val).getUpper().html() +" - "+ $(val).getLower().html();
        $(val).getAmount().html(x);
        $(val).css('background-color', 'orange');
    }
    else if(upr&& !low)
    {//only upr
        $(val).getAmount().html("Up to " + $(val).getUpper().html());
    } else if (!upr && low)
    { //only low
        $(val).getAmount().html("At least " + $(val).getLower().html());
    }
});
});

Jquery: combine table cells variably based on their content

1 Answers