從表行獲取值

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 ，獲取它們的值並將其設置為對象的鍵，並在它們再次出現時增加其值。

 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 ，然后將count添加到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 /類等，則可以獲取該表，然后在表上可能有多個表的情況下使用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>

Answer 6

未經測試：嘗試在運動名稱之前添加標簽<td>中的任何字符，例如

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

並添加一個if語句來檢查哪個td中有一個〜，並在標記中獲取文本

從表行獲取值

問題描述

6 個解決方案

解決方案1
1 2016-01-07 22:57:37

解決方案2
0 2016-01-07 22:59:25

解決方案3
0 2016-01-07 23:06:41

解決方案4
0 已采納 2016-01-07 23:35:11

解決方案5
0 2016-01-07 23:38:38

解決方案6
-1 2016-01-07 22:58:24

從表行獲取值

問題描述

6 個解決方案

解決方案1 1 2016-01-07 22:57:37

解決方案2 0 2016-01-07 22:59:25

解決方案3 0 2016-01-07 23:06:41

解決方案4 0 已采納 2016-01-07 23:35:11

解決方案5 0 2016-01-07 23:38:38

解決方案6 -1 2016-01-07 22:58:24

解決方案1
1 2016-01-07 22:57:37

解決方案2
0 2016-01-07 22:59:25

解決方案3
0 2016-01-07 23:06:41

解決方案4
0 已采納 2016-01-07 23:35:11

解決方案5
0 2016-01-07 23:38:38

解決方案6
-1 2016-01-07 22:58:24