Question

从下表中可以使用 Javascript / jquery / jquery-plugins 获取每项运动的总值，例如：

足球：2 板球：1 网球：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

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

＆＃13;

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);

});

＆＃13;

<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>

＆＃13;

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等，则可以获取特定表，然后使用tableElement.getElementsByTagName（＆＃39; 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>

Answer 6

未经测试：尝试在运动名称前添加标记<td>中的任何字符，例如

<td>~Baseball</td>
<td>~Football</td>
<td>~Basketball</td>

并添加一个if语句来检查哪个td中包含〜，并获取标记中的文本

从表行获取值

6 个答案: