Получить значения из строки таблицы

Из приведенной ниже таблицы можно получить общие значения для каждого вида спорта с использованием Javascript/JQuery/JQuery-плагин, например:Получить значения из строки таблицы

футбол: 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(), но не получил его на работу. Любой совет будет полезен!

источник

2016-01-07 user_2334

Мое предложение:

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

источник

2016-01-07 23:35:11 gaetanoM

Создайте объект, проанализируйте таблицу, чтобы получить все последние td s, выберите их значение и установите его как ключ объекта и увеличьте его значение, когда они появятся снова.

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>

источник

2016-01-07 22:57:37 void

если вы сделали таблицу> tr, вы могли бы пропустить i == 0 check – Taplar

@Taplar теперь я использовал 'table tr: not (: first)' – void

-1

Непроверенные: Попробуйте добавить любой символ, который будет находиться в теге <td> перед именем спорта, например

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

и добавить, если заявление, чтобы проверить, какие из ТД имеют ~ в них и получают текст в теге

источник

2016-01-07 22:58:24

Это будет проходить через строки (игнорируя первый) и просмотрите последние td каждого из них и добавьте счет к объекту counts. Если вид спорта еще не был замечен, он включает его с числом 1, в противном случае он просто увеличивает уже существующий.

EDIT: Добавлена 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); 
});

источник

2016-01-07 22:59:25 Cineris

Ответ void в основном тот же, за исключением того, что он использует встроенный ' hasOwnProperty() 'и jquery' each() '. – Cineris

Чистый раствор JS. Вы можете получить конкретную таблицу, если она имеет id/class и т. Д., А затем использовать 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; 
    } 
    }

источник

2016-01-07 23:06:41 SethWhite

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 
 
\t if(third_column_value[i].innerHTML in collection){ 
 
\t \t collection[third_column_value[i].innerHTML]+=1; 
 
\t } 
 
//if not add create a key name sport value and add 1 to it 
 
\t else{ 
 
\t \t collection[third_column_value[i].innerHTML]=1; 
 
\t } 
 
} 
 
//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>

источник

2016-01-07 23:38:38 repzero

Получить значения из строки таблицы

ответ

Смежные вопросы