Question

我试图确定一个数字在一个表行中重复多少次。当发现3次或更多次时，我需要将td的颜色更改为红色，如下所示：

预期结果：

我的正则表达式正在运行，但我无法获得正确的重复计数并更改td的颜色....

x = $("table").find("tr");
text = "";

x.each(function(line){
  number = $(this).text();
  check = checkNum(number);
  console.log(checkNum(number));

  if(check.length > 0){
    repeats = check[0][1];
    text += "Number "+number[check[0]['index']]+" was repeated "+repeats+ " times on line "+line+"<br>";
    $('#results').html(text);
    $(this).css('color', 'red');
  }
});

function checkNum(num) {
    var tempArray = [];
    num = num.replace(/\s+/g,"_");
    exp = new RegExp(/([0-9])\1{2,}/, "g");
    ex = exp.exec(num);

    if(ex){
     tempArray.push(ex);
    }

    return tempArray;
}

请检查this fiddle

Answer 1

这是实现它的功能方式（没有正则表达式）：

＆＃13;

$("#results").html(
    [].concat.apply(
        $.map($("table tr"), function(tr, line){
            return $(tr).children().get().reduceRight(function (acc, td, i) {
                var txt = $(td).text();
                if (txt === acc[0][0]) 
                    acc[0][1] = i; // Extend range
                else
                    acc.unshift([txt, i, i+1]); // Add a new range
                return acc;
            }, [[null, 0, 0]])
            .filter(function (range) { // Get the ranges that are long enough
                return range[2] - range[1] >= 3;
            })
            .map(function (range) { // Map them to strings, and apply the styling
                $(tr).children().slice(range[1], range[2]).css('color', 'red');
                return "Number "+range[0]+" was repeated "+(range[2] - range[1])+ " times on line "+line;
            })
        })
    ).join("<br>")
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>2</td><td>3</td><td>1</td><td>5</td><td>1</td><td>1</td><td>1</td><td>1</td><td>0</td></tr>
<tr><td>0</td><td>5</td><td>1</td><td>1</td><td>8</td><td>3</td><td>3</td><td>3</td><td>4</td></tr>
<tr><td>0</td><td>4</td><td>1</td><td>5</td><td>8</td><td>7</td><td>6</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>2</td><td>2</td><td>2</td><td>2</td><td>9</td><td>2</td><td>2</td><td>0</td></tr>
<tr><td>1</td><td>4</td><td>4</td><td>4</td><td>2</td><td>4</td><td>4</td><td>4</td><td>4</td></tr>

</table>
<div id='results'>
</div>

＆＃13;

Answer 2

不是很漂亮，但它会给你你想要的结果。我正在使用HTML data-* Attributes将数字组合在一起。

/* Variable Defaults */
var objectContainer = {};
var index;

/* Loop Through Rows / Cells */
$('tr').find('td').each(function() {
    $(this).attr('data-text', $(this).text());
}).end().each(function() {
    index = $(this).index();
    objectContainer[index] = {};
    $(this).find('td').each(function() {
        objectContainer[index][$(this).data('text')] = $(this).siblings('td[data-text="' + $(this).data('text') + '"]').length + 1;
    });
});

/* Iterate Object Container */
$.each(objectContainer, function(row, data) {
    $.each(data, function(key, value) {
        if(value >= 3) {
            $('tr:eq(' + row + ')').find('td[data-text="' + key + '"]').css('color', 'red');
            $('#results').append($('<span/>', {
                text: 'Number ' + key + ' was repeated ' + value + ' times on line ' + row + '.'
            })).append($('<br/>'));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>1</td>
        <td>5</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>5</td>
        <td>1</td>
        <td>1</td>
        <td>8</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>0</td>
        <td>4</td>
        <td>1</td>
        <td>5</td>
        <td>8</td>
        <td>7</td>
        <td>6</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>9</td>
        <td>2</td>
        <td>2</td>
        <td>0</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>2</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
</table>
<div id="results">
</div>

Answer 3

通过将表解析为每行的数组作为连接字符串，您可以在行上执行正则表达式，并使用正则表达式返回的子字符串范围将必要的CSS应用于该行中的子项的切片

$("table").find("tr").each(function (line, row) {

    var children = $(row).children("td");
    var numbers = children.map(function (_, data) {
        return data.innerHTML;
    });

    var expression = new RegExp(/([0-9])\1{2,}/, "g");
    var string = numbers.get().join('');
    var result = expression.exec(string);

    while (result) {

        var length = result[0].length;
        var number = result[1];
        var start = result.index;
        var end = start + length;

        children.slice(start, end).each(function (_, child) {
            $(child).css('color', 'red');
        });

        $("#results").append(
            '<span>Number ' + number + 
            ' was repeated ' + length + 
            ' times on line ' + line + '.' +
            '</span><br>'
        );

        result = expression.exec(string);
    }
});

https://jsfiddle.net/ews8t955/1/

如何使用jQuery在条件下在html表上获取重复值

3 个答案: