Jquery:根据内容不同地组合表格单元格

时间:2014-03-05 13:49:50

标签: jquery if-statement html-table

我有一个包含三列的表:

金额|上绑带|降低条带

各列中的每个单元格都应用了css类(因此'amount'列中的单元格具有'amount'类等等。)

<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>

这些列的值是从数据库中提取的:只要数据库中包含确切数量,就会填充“数量”列中的单元格,只要上部条带可用,“上部条带”列中的单元格就是填充,等等。 (一般的经验法则是,只要确切数量可用,就不会出现任何波段,因此如果填充“数量”,则其他两个单元格将始终为空白,即包含不间断的空间。)

我想通过以下方式将上部和下部条带细胞组合到“数量”细胞中:

  • 如果填充'amount'单元格,请将其保留原样
  • 如果填充“上部条带”和“下部条带”单元格,则“数量”单元格应显示为“[上部条带值] - [下部条带值]”
  • 如果仅填充“上部条带”单元格,则“数量”单元格应显示为“最多[上部条带值]”
  • 如果只填充'低位条带'单元格,则“金额”单元格应显示为“至少[较低条带值]”
  • 如果所有三个单元格都包含不间断的空格,请保留'amount'单元格

有谁能告诉我如何使用JQuery实现这一目标?我收集它需要一系列'如果'的陈述,但我微薄的JQ技能不能胜任这项任务。


修改

值得指出的是,我试图以几种不同的方式做到这一点,其中没有一种方法有效。我很高兴只是指向正确的方向,就像被告知JQ的功能一样 - 我不希望有人为我编写代码。

1 个答案:

答案 0 :(得分:2)

请看这个小提琴.. http://jsfiddle.net/ntk3x/

我用彩色编码,这样你就知道发生了什么情况。

$.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());
    }
});
});