javascript - 在表 jquery 中搜索和计数条目

Question

我有下表：

<table>
    <tr>
        <th>Alarm</th>
    </tr>
    <tr>
        <td>OK</td>
    </tr>
    <tr>
        <td>Missing</td>
    </tr>
    <tr>
        <td>OK</td>
    </tr>
</table>

我想像这样计算此表中的行数
OK = 2
Missing = 1

但我不知道如何用 jQuery 来做，应该只为警报列指定选择器，因为我有其他列包含 ok 和 missing

注意：我想计算表中特定列的行数，仅用于警报列 alaram 列包含 2 个正常和 1 个缺失。

Answer 1

假设Alarm是第一列：

var okCount = $('td:contains("OK")').filter(function() {
    return $(this).index() == 0;
}).length;
var missingCount = $('td:contains("Missing")').filter(function() {
    return $(this).index() == 0;
}).length;

console.log('okCount: ' + okCount);
console.log('missingCount : ' + missingCount);​

​现场演示

Answer 2

看看这是否有用：http: //jsfiddle.net/AG6kr/

var table = document.getElementById('yourTableID'),
    column = 1,
    tr = table.getElementsByTagName('tr'),
    trLen = tr.length,
    numMissing = 0,
    numOK = 0;


while(trLen--) {
    if(tr[trLen].children[column-1].innerHTML == 'OK') {
        numOK++;
    }
    if(tr[trLen].children[column-1].innerHTML == 'Missing') {
        numMissing++;
    }
}

console.log(numOK);
console.log(numMissing);

万一有人想知道如何在没有 jQuery 的情况下做到这一点

Answer 3

谁需要 jQuery？

var table = document.getElementById('yourTableID'),
    cells = table.getElementsByTagName('td'),
    numCells = cells.length,
    okCount = 0,
    missingCount = 0;

while(numCells--) {
    if (cells[numCells].innerHTML == 'OK') okCount++;
    else if (cells[numCells].innerHTML == 'Missing') missingCount++;
}

console.log('OK: ' + okCount + ', Missing: ' + missingCount);    // Should output "OK: 2, Missing: 1 into the console

Answer 4

不需要过滤索引，使用第 n 个子选择器！我的选择器也使用 thead 和 tbody，它会在 OP 代码中使用的示例中失败。

HTML

<table>
    <thead>
        <tr>
            <th>Alarm</th>
            <th>Warning</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>OK</td>
            <td>OK</td>    
        </tr>
        <tr>
            <td>Missing</td>
            <td>Missing</td>    
        </tr>
        <tr>
            <td>OK</td>
            <td>OK</td>    
        </tr>
    </thead>
</table>​

JavaScript

var index = $("table thead th:contains('Alarm')").index() + 1;  //index is zero based, nth-child is 1 based.
var cells = $("table tbody td:nth-child(" + index + ")");

var okCount = cells.filter(":contains('OK')").length;
var missingCount = cells.filter(":contains('Missing')").length;

console.log(okCount, missingCount);

​JSFiddle

Answer 5

http://jsfiddle.net/PzBqX/4/

为了矫枉过正，这是为了以防您具有相同的表结构并希望在任何列中搜索任何数据集。

HTML：

<table>
  <tr>
    <th>Alarm</th>
    <th>Fruit</th>
  </tr><tr>
    <td>OK</td>
    <td>Apple</td>
  </tr><tr>
    <td>Missing</td>
    <td>Orange</td>
  </tr><tr>
    <td>OK</td>
    <td>Apple</td>
  </tr>
</table>​

JavaScript：

$(document).ready(function() {       
    var results = tallyResults($('table'), 'Fruit', Array('Apple', 'Orange'));

    /*
       {
           Apple: 2,
           Orange: 1
       }
    */
});


function tallyResults(table, col, vals) {
    var valsCount = { }
    var columnIndex = null;

    //-- init value object using vals array

    $(vals).each(function(i, v) {
        valsCount[v] = 0;
    });

    //-- get index of the column we are currently searching

    table.find('tr th').each(function(i, v) {
        el = $(this);
        if (el.text() == col) {
            columnIndex = el.index();
        }
    });


    //-- tally all instances of the values we are searching
    //-- for in the proper column index

    table.find('tr td').each(function(i, v) {
        el = $(this);
        if (el.index() == columnIndex) {
           t = el.text();
           if(valsCount[t] != undefined) {
              valsCount[t]++;
           }
        }
    });


    return valsCount;
}

Answer 6

$('td:contains("OK")').length 将返回包含“OK”的单元格数

Answer 7

这是你要找的吗？http://jsfiddle.net/tQTDk/9/

var points = 0;

$("td").each(function() {

    var tdVal = $(this);

    if(tdVal.text().indexOf('OK') >= 0)
       points += 2;


    if(tdVal.text().indexOf('Missing') >= 0)
       points += 1;
});

alert(points);  

​</p>