我有一个包含三列的表:
金额|上绑带|降低条带
各列中的每个单元格都应用了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>
这些列的值是从数据库中提取的:只要数据库中包含确切数量,就会填充“数量”列中的单元格,只要上部条带可用,“上部条带”列中的单元格就是填充,等等。 (一般的经验法则是,只要确切数量可用,就不会出现任何波段,因此如果填充“数量”,则其他两个单元格将始终为空白,即包含不间断的空间。)
我想通过以下方式将上部和下部条带细胞组合到“数量”细胞中:
有谁能告诉我如何使用JQuery实现这一目标?我收集它需要一系列'如果'的陈述,但我微薄的JQ技能不能胜任这项任务。
修改
值得指出的是,我试图以几种不同的方式做到这一点,其中没有一种方法有效。我很高兴只是指向正确的方向,就像被告知JQ的功能一样 - 我不希望有人为我编写代码。
答案 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());
}
});
});