2011-02-03 3 views
1

Использование Javascript в HTML-странице, можно ли подсчитать экземпляры заданного текстового значения в ячейках для данного столбца? Другими словами, если один из столбцов содержит значения ячеек «1» или «2», могу ли я генерировать «общий» подсчет количества «2» значений в этом столбце?Javascript Count HTML Column Values ​​

+0

Вы ищете общее количество в столбце или строке? Вы ссылаетесь на оба вопроса. – JoeyRobichaud

+0

В обоих ответах на этот вопрос (с момента написания) есть реализация JavaScript на основе jQuery. Вы используете библиотеку вообще, или вам нужен простой JavaScript? –

+0

@ Давид: Ты прав. Как-то мне показалось, что я вижу тег jQuery. Обновлен мой ответ. – user113716

ответ

3

EDIT:Что касается Вашего комментария:

Пример:http://jsfiddle.net/cGS99/

var rows = document.getElementById('myTable').rows, 
    len = rows.length, 
    i, 
    cellNum = 0, 
    count = 0, 
    cell; 

for (i = 0; i < len; i++) { 
    cell = rows[i].cells[cellNum]; 
    if (cell.innerHTML === 'X') { 
     count++; 
    } else if(cell.innerHTML === '...') { 
     cell.innerHTML = count; 
    } 
} 

или если в колонке с "...", вы имели в виду последний столбец, изменить следующим образом:

} else if(cell.innerHTML === '...') { 

к этому:

} else if(i === (len - 1)) { 

Пример:http://jsfiddle.net/cGS99/1/


doh!


var rows = document.getElementById('myTable').rows, // get the rows in the table 
    len = rows.length, // get the quantity of rows 
    cell = 1,    // index of the column (zero based index) 
    count = 0;   // keep score 

while(len--) { 
    if(rows[len].cells[cell].innerHTML.indexOf('2') > -1) 
     count++; 
} 

Это будет работать до тех пор, пока содержание не имеет возможные суб-строки «2», как «12».

+2

Поскольку я всегда доверяю вашим ответам, я немного смущен тем, что вы отправили ответ jQuery на вопрос JavaScript. Я что-то пропустил? Были ли теги OP заменены на 5-минутный интервал? –

+0

@Felix: Cuz JQUERY делает лучший код !!!!!!! * (на самом деле, я мог бы поклясться, что видел тег) * Обновлено. Спасибо за примечание. : o) – user113716

+0

@Felix: Только что поймал 'innerHTML', но пропустил' # '. Я обновлю. Благодарю. : o) Я сейчас ушел. – user113716

1

Похоже, что вы ищете contains selector. fiddle.

<table> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
</table 

Использование длина

$('td:contains(1)').length 
$('td:contains(2)').length 

Выход:

--> 4 
--> 2 
0

@patrick_dw указал мне в нужном направлении (спасибо!). Вот результат, который работает для меня ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
<title></title> 
<script language="Javascript"> 
function getx() { 
    var rows = document.getElementById('myTable').rows, // get the rows in the table 
    len = rows.length, // get the quantity of rows 
    cell = 0,    // index of the column (zero based index) 
    count = 0;   // keep score 

    while(len--) { 
     if(rows[len].cells[cell].innerHTML.indexOf('1') > -1) 
      count++; 
    } 
    document.getElementById('colx').innerHTML = count; 
} 
</script> 
</head> 

<body onload="getx();"> 

<table id="myTable" border="1"> 
    <tr> 
     <td>1</td> 
     <td>A</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>B</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>A</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>A</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>B</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>A</td> 
    </tr> 
    <tr> 
     <td id="colx"> </td> 
     <td></td> 
    </tr> 
</table> 

</body> 

</html>