从 table 行获取值

Question

从下面的 table 中是否可以使用 Javascript/jquery/jquery-plugins 获得每项运动的总价值，例如：

football:2 cricket: 1 Tennis:2

<!DOCTYPE html>
<html>
<body>

<table style="width:100%">
<thead>
<tr>
    <td>first name</td>
    <td>last name</td>      
    <td>sport</td>
  </tr>
</thead>
  <tr>
    <td>Bob</td>
    <td>Smith</td>      
    <td>football</td>
  </tr>
  <tr>
    <td>Dan</td>
    <td>Jackson</td>        
    <td>cricket</td>
  </tr>
  <tr>
    <td>Will</td>
    <td>Rie</td>        
    <td>Tennis</td>
  </tr>
<tr>
    <td>Tom</td>
    <td>Lawrence</td>       
    <td>Tennis</td>
  </tr>
<tr>
    <td>John</td>
    <td>croft</td>      
    <td>football</td>
  </tr>

</table>

</body>
</html>

我试过使用 Jquery .size() 和 .count() 但没有成功。任何建议都会有所帮助！

Answer 1

创建一个对象，解析 table 以获取所有最后的 td，获取它们的值并将其设置为对象的键，并在它们再次出现时递增它的值。

var sports = {};
$(function() {
  $("table tr:not(:first)").each(function(i) {
    var sport = $(this).find("td").last().text();
    if (sports.hasOwnProperty(sport))
      sports[sport] += 1;
    else
      sports[sport] = 1;
  });

  console.log(sports);
  console.log("Football count is: " + sports.football);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <thead>
    <tr>
      <td>first name</td>
      <td>last name</td>
      <td>sport</td>
    </tr>
  </thead>
  <tr>
    <td>Bob</td>
    <td>Smith</td>
    <td>football</td>
  </tr>
  <tr>
    <td>Dan</td>
    <td>Jackson</td>
    <td>cricket</td>
  </tr>
  <tr>
    <td>Will</td>
    <td>Rie</td>
    <td>Tennis</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Lawrence</td>
    <td>Tennis</td>
  </tr>
  <tr>
    <td>John</td>
    <td>croft</td>
    <td>football</td>
  </tr>

</table>

Answer 2

这将遍历行（忽略第一行）并查看每行的最后 td，并将计数添加到 counts 对象。如果以前没有看过这项运动，它会将其包括在内，计数为 1，否则，它只会增加已经存在的运动。

编辑：添加了 jsfiddle：https://jsfiddle.net/1prura93/

$(document).ready(function() {
  var rows = $('tr');
  var counts = {};
  var sport = null;

  for (var i = 1; i < rows.length; i++) {
    sport = $('td', rows[i]).last().text();
    if (!counts[sport]) {
      counts[sport] = 1;
    } else {
      counts[sport]++;
    }
  }

  console.log(counts);
});

Answer 3

纯JS解决方案。如果它有 id/class 等，您可以获得特定的 table，然后在可能有多个 table 的情况下使用 tableElement.getElementsByTagName('tr)页。

  var sports = {};
  var rows = document.getElementsByTagName('tr');
  for(var i = 1; i < rows.length; i++) {
    var sport = rows[i].children[2].textContent;
    if(sports[sport] === undefined) {
      sports[sport] = 1;
    }
    else {
      sports[sport] += 1;
    }
  }

Answer 4

我的建议是：

$(function() {
  var result = {};
  $('table tr:not(:first)').find('td:last').each(function(index, element) {
    var txt = element.innerHTML;
    if (!result.hasOwnProperty(txt)) {
      result[txt] = 1;
    } else {
      result[txt]++;
    }
  });
  var resultStr = JSON.stringify(result).replace(/[{}"]/g, '').replace(/,/g, ' ');
  alert(resultStr);
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<table style="width:100%">
    <thead>
    <tr>
        <td>first name</td>
        <td>last name</td>
        <td>sport</td>
    </tr>
    </thead>
    <tr>
        <td>Bob</td>
        <td>Smith</td>
        <td>football</td>
    </tr>
    <tr>
        <td>Dan</td>
        <td>Jackson</td>
        <td>cricket</td>
    </tr>
    <tr>
        <td>Will</td>
        <td>Rie</td>
        <td>Tennis</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>Lawrence</td>
        <td>Tennis</td>
    </tr>
    <tr>
        <td>John</td>
        <td>croft</td>
        <td>football</td>
    </tr>

</table>

Answer 5

Javascript接近

//create an emppty object to hold your collection
var collection={};
//find all td cells in the third columns and save it to a variable named third_column_value
var third_column_value=document.getElementById('sport').querySelectorAll('tr  td:nth-child(3)');
//loop through all third column objects
for(var i=0;i<third_column_value.length;++i){
//if td object value (sport value ) is in collection add 1 to the sport value
 if( third_column_value[i].innerHTML in collection){
  collection[third_column_value[i].innerHTML]+=1;
 }
 //if not add create a key name sport value and add 1 to it
 else{
  collection[third_column_value[i].innerHTML]=1;
 }
}
//make it a string and put it in a pop up box
alert(JSON.stringify(collection));

<!DOCTYPE html>
<html>
<body>

<table style="width:100%" id='sport'>
<thead>
<tr>
    <td>first name</td>
    <td>last name</td>      
    <td>sport</td>
  </tr>
</thead>
  <tr>
    <td>Bob</td>
    <td>Smith</td>      
    <td>football</td>
  </tr>
  <tr>
    <td>Dan</td>
    <td>Jackson</td>        
    <td>cricket</td>
  </tr>
  <tr>
    <td>Will</td>
    <td>Rie</td>        
    <td>Tennis</td>
  </tr>
<tr>
    <td>Tom</td>
    <td>Lawrence</td>       
    <td>Tennis</td>
  </tr>
<tr>
    <td>John</td>
    <td>croft</td>      
    <td>football</td>
  </tr>

</table>

从 table 行获取值

Get values from table row

javascript

jquery

jquery-plugins