Question

我有一个包含三列的表：

金额|上绑带|降低条带

各列中的每个单元格都应用了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的功能一样 - 我不希望有人为我编写代码。

Answer 1

请看这个小提琴.. 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());
    }
});
});

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

1 个答案: