Question

我在HTML文件中有一个表格，如下所示（这只是表格的一行）

    <tr>
   <td class = "numeric">0</td>
   <td class = "numeric">2</td>
   <td class = "numeric">3</td>
   <td class = "numeric">1</td>
   <td class = "numeric">4</td>
   <td class = "numeric" id="city3"> </td>
      </tr>

我需要编写一个脚本来检索表中的数字，以便我可以将它们合计。我只想说我完全不知道如何检索信息。任何帮助表示赞赏。

Answer 1

如果你想实现它使用原生JavaScript （http://jsfiddle.net/S4XX2/1/）

var tds = document.getElementsByClassName('numeric');

var total = 0;

for(var i = 0; i < tds.length; i++) {
    var textValue = tds[i].innerHTML;
    if(textValue != '') {
        total += parseInt(textValue);   
    }
}

alert(total); // alerts the total sumed up

如果你使用JQuery （http://jsfiddle.net/S4XX2/2/）

var total = 0;

$('td.numeric').each(function() {
    var textValue = $(this).text();
    if(textValue != '') {
        total += parseInt(textValue);  
    }
});

alert(total); // alerts the total sumed up

Answer 2

你需要检查数字（整数），因为你的一个tds是空的它将返回一个空字符串，或者使用parseInt函数它将返回NaN。这将破坏您稍后进行的任何计算。

以下需要jQuery，但可以使用纯JS轻松完成。它将检查它是否为数字，如果不是，它将/应该为非数字的那些返回0并将'字符串'数字转换为实际用于添加的数字：

var total = 0;

$('td').each(function() {
    var num = parseInt(this.innerHTML, 10);  // Converts string to int. Added Radix as @JonP kindly pointed out.
    if (!isNaN(num)) {                       // Checks if all int are numbers and not NaN (not a number)
        total = total + num;                 // Just for clarity's sake this is written out fully
    }
});

alert(total);

非jQuery方式是这样的：

var rows = document.getElementsByClassName('numeric'),
    total = 0;

for(var i = 0; i < rows.length; i++) {
    var num = parseInt(rows[i].innerHTML, 10);
    if (!isNaN(num)) {
        total = total + num;
    }
}

alert(total);

编辑：正如@jonP指出的那样，如果使用parseInt（num，10），你需要添加一个基数 - 这是第二个参数。 Link to article explaining Radix。所以行应该是parseInt(this.innerHTML, 10)

Answer 3

使用原生js函数而不是循环的更紧凑的方式：

    var nums = document.getElementsByClassName('numeric');


 var total = nums.reduce(function(previousValue, currentValue, index, array){
   return previousValue + parseInt(array[index].innerHTML);
},0);

Answer 4

var items = document.getElementsByClassName('numeric');

var total = 0;

for (i = 0; i < items.length; i++) {
    var num = parseInt(items[i].innerHTML, 10) || 0; // converts to a number or zero if empty.
    total += num;   
}

document.getElementById('result').innerHTML = total;

小提琴：http://jsfiddle.net/XJ5gS/

Answer 5

类似的东西：

var total;
$('td').each.(function() {
     total += $(this).val('td');
});

将HTML数据导入JavaScript

5 个答案: