Question

这就是问题，这些钞票来自点阵式打印机，纸张是连续的格式（就像你们在销售部门看到的那样）。有时候为了支付销售费用，推销员会拿一张纸（不是打印出来的纸币）来手工制作。现在的系统可以通过让人们手动设置值然后继续递增值来处理这种跳跃。

但是htere还有一个差距，我必须在差距之前突出显示行（只有带有id的单元格），只是为了让人更清楚看到有人拿了账单，手工制作并且尚未注册的事实

就像这样：（id列的css类是clave，意思是键）

|  id | qtty | price |
|-----+------+-------+
| 001 |   25 |     3 |
| 002 |   35 |     5 |
| 004 |   86 |     3 |
| 005 |   96 |     1 |
| 007 |   85 |     2 |
| 008 |   24 |     1 |

所以id 002和005的行应该用font-weight：bold css来表示，以便使丢失的账单更加可见。我遇到的另一个问题是这个html结构不是表格，它实际上是由图层组成的（div标签）。

我有很多代码，我不知道它为什么不起作用...... 你可以看到它在这里运行： in this JSbin

Answer 1

经过很长一段时间看你的解释，我认为这就是你想做的事情

$(document).ready(function() {
    $(".clave").each(function(i, v) { // loop through each elem with class=clave
        var $next = $.trim($(".clave").eq(i + 1).text()); // get next text
        var $ele = $.trim($(v).text()); // get this text
        if ((+$next) - (+$ele) > 1) { // subtract next from now - if greateer than 1
            $(v).css('color', 'red').css('font-weight','bold'); // turn current text bold
        };
    });
});

编辑：忘记使用$ .trim（）代替.trim（）进行跨浏览器支持

http://jsfiddle.net/Zxc2w/

http://jsbin.com/isaruj/5/

Answer 2

解决问题的一种方法：

function ensureConsecutive(el) {
    if (!el || !el.parentNode.nextElementSibling) {
        return false;
    }
    else {
        var curId = parseInt(el.textContent,10),
            parent = el.parentNode,
            nextRow = parent.nextElementSibling,
            nextId = parseInt(nextRow
            .getElementsByClassName('id')[0].textContent,10);

        if (curId + 1 !== nextId) {
            $(el).addClass('nonConsecutive');
        }
    }
}

$('td.id').each(
    function(i,el){
        ensureConsecutive(el);
    });

JS Fiddle demo

虽然这不是跨浏览器兼容的，但由于nextElementSibling和textContent的使用，这可能会使用更多jQuery方法或通过其他纯JavaScript方法（{{1一个）。

Answer 3

使用jQuery选择器，然后遍历所有选中的并使用.css方法更改css

当值不相关时，改变单元格的样式

3 个答案: