Question

我正在尝试在Generated HTML table中的一个列中获取数据总和。

该表从MySQL获取yt_id并使用JSON从YT Api获取数据（该表是自动生成的）

这是我的代码：

<html>
<?php
include_once('db.php');

$result = mysql_query("select * from yt_data");


echo "<table border='1'>
<tr>
<th>ID</th>
<th>Views</th>
<th>Likes</th>
</tr>";

while($r=mysql_fetch_array($result))
{    
   $yt_id=$r["yt_id"];

   $video_ID = $yt_id;
$JSON = file_get_contents("https://gdata.youtube.com/feeds/api/videos/{$video_ID}?v=2&alt=json");
$JSON_Data = json_decode($JSON);
$views = $JSON_Data->{'entry'}->{'yt$statistics'}->{'viewCount'};
$likes = $JSON_Data->{'entry'}->{'yt$rating'}->{'numLikes'};


  echo "<tr id='countit'>";
  echo "<td>" . $yt_id . "</td>";
  echo "<td class='count-me'>" . $views . "</td>";
  echo "<td>" . $likes . "</td>";
  echo "</tr>";



}

echo "</table>";
?>
</html>

我试图使用此代码获得总和，但我只得到NaN：

<script language="javascript" type="text/javascript">
var tds = document.getElementById('countit').getElementsByTagName('td');
var sum = 0;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'count-me') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('countit').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>

知道如何让它发挥作用吗？

编辑1：我已删除了表格ID，现在效果很好。但我想在列中汇总所有数据，以便查看$ views的所有数据。不知道怎么做？我正在使用这个，但总是得到第一个的价值

var tds = document.getElementById('countit').getElementsByTagName('td');
var sum = 0;
for(var i = 0; i < tds.length; i ++) {
    if(tds[i].className == 'count-me') {
        sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
    }
}
document.getElementById('countit').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';

Answer 1

尝试使用类选择器

var tds = $('.countit td'); //using jquery
var tds = document.getElementsByClassName(countit).getElementsByTagName('td'); //using javascript

而不是

var tds = document.getElementById('countit').getElementsByTagName('td');

或

var sum = 0; $.each($('.count-me'),function(i,v) { var $text=$(v).text(); sum += isNaN($text) ? 0 : parseInt($text); } $('#countit').append('<tr><td>' + sum + '</td><td>total</td></tr>');

Answer 2

你也必须循环遍历行。

<script language="javascript" type="text/javascript">
rows = document.getElementById('countit').getElementsByTagName('tr');
for(var j = 0; j < rows.length; j ++) {
  var tds = row[j].getElementsByTagName('td');
  var sum = 0;
  for(var i = 0; i < tds.length; i ++) {
    if(tds[i].className == 'count-me') {
      sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
    }
  }
}
document.getElementById('countit').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>

作为建议，表id和TR类名相同“countit”。这有点令人困惑。请更改一个值。

生成表中的列总和

2 个答案: