Сравнение содержимого текста Таблици в строках
Добрый день, Потихоньку пытаюсь освоить jQuery, поставил какбы задачю для себя:
На странице Формируется некая таблица, Каждый раз с разным содержанием Строк (tr) и ячеек (td) и разное их количество. К примеру приведу маленькую таблицу:
<table class="compare_table">
<tbody>
<tr>
<th>Имя</th>
<td>Саша</td>
<td>Петя</td>
<td>Игорь</td>
</tr>
<tr>
<th>Фамелия</th>
<td>Петров</td>
<td>Сидоров</td>
<td>Сидоров</td>
</tr>
<tr>
<th>Фамелия</th>
<td>Харьков</td>
<td>Харьков</td>
<td>Харьков</td>
</tr>
</tbody></table>
Пытаюсь сделать проверку на одинаковое содержание ячеек в строках, и если содержание всех ячеек в строке одинаково, то добавить к строке CSS класс....
jQuery("#compare").click(function(event){
jQuery(".compare_table tr").each(function() { // ----- перебираю все строки в таблице
var tdlast =jQuery(this).find("td:last-child").text(); //---- определяю какой текст содержится в последней ячейке, текущей строки (отрабатывает нормально!!)
var blok = jQuery(this).find("td").text(); //---- *НЕМОГУ ПОНЯТЬ как определить значение всех ячеек (по отдельности) в текущей строке чтобы потом сравинить их с tdlast
alert ("текст в TD ------- " +blok);
alert ("текст в ПОСЛЕДНЕМ TD ------- " +tdlast);
});
*Как я понимаю надо все ячейки с их значениеми, в текущей строке, загнать в масив. Но как ? :(( а потом прогнать по циклу етот массив сравнивая с переменной tdlast и если все значения совпали, то сделать: jQuery(this).parent().addClass('same'); Пожалуста помогите, второй день не отхожу от компа :(( |
Цитата:
|
avantyrist, вариант через filter
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.orange {
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
var tr = jQuery(".compare_table tr");
tr.each(function() {
var td = jQuery("td", this),
len = td.length,
text = td.eq(0).text();
td = td.filter(function() {
return jQuery(this).text() == text
}).length;
jQuery(this).toggleClass("orange", len == td)
})
}); </script>
</head>
<body>
<table class="compare_table">
<tbody>
<tr>
<th>Имя</th>
<td>Саша</td>
<td>Петя</td>
<td>Игорь</td>
</tr>
<tr>
<th>Фамелия</th>
<td>Петров</td>
<td>Сидоров</td>
<td>Сидоров</td>
</tr>
<tr>
<th>Фамелия</th>
<td>Харьков</td>
<td>Харьков</td>
<td>Харьков</td>
</tr>
</tbody></table>
</body>
</html>
|
Рони спасибо Вам, всё работает, но я не могу понять как :((
если не тяжело подскажите плиз....
var tr = jQuery(".compare_table tr");
tr.each(function() {
var td = jQuery("td", this), // я как понял указанный в конце this какраз и даёт возможность перебора в текущей строке ??
len = td.length,
text = td.eq(1).text();
alert ("Переменная len ------- " +len); // выводит количество ячеек(td) в строке(tr), для чего ??
alert ("Переменная td ------- " +td); // выводит значение [object Object] ---- не пойму что ето означает :((
alert ("Переменная text ------- " +text); // выводит содержимое в первой ячейке
td = td.filter(function(){ // что оно фильтрует ? значение td выводит [object Object]
return jQuery(this).text() == text // сделали фильтрацию, но не пойму ета функция как я понимал удаляет обьекты, как она работает в етой ситуации
}).length; // какое количество определяем, и для чего??
jQuery(this).toggleClass("hidden", len == td) // если сделать addClass то клас присвоится всем строкам,почему так ?? :(
})
Вообше не пойму каким образом ето всё работает, очень хочется понять, документации я много перечитывал, но документация и практика, ето разные вещи, ешё раз ОГРОМНОЕ спасибо |
Цитата:
len количество ячеек до фильтраци фильтруем ячейки сравнивая текст любой с эталоном text (я взял первую для эталона, вы вторую) -- смотрим сколько ячеек осталось после фильтрации -- если одинаково len == td =>true строке присвоится класс смотрите документацию на toggleClass http://api.jquery.com/toggleClass/#t...lassName-state td сначала хранит все ячейки потом количество после фильтрации |
Понял практически всё :)
Тока вот я немогу понять одного момента никак, момент который меня изначально в ступор поставил: Пытаясь посмотреть что td содержит в себе до фильтрации,
alert ("Переменная td до фильтрации --- " +td);
Вижу вот такой результат: [object Object] - что оно такое ?? :) и никак не могу понять что ето означает О_о можно каким то образом посмотреть-вывести содержимое td до фильтрации?? или надо просто условно понимать, что туда записались какието значения, но а в каком виде они там лежат ? :) куча вопросов :( |
avantyrist,
это обьект jQuery добавить console.log(td) в код нажать F12 |
Вот за ето я туканул !!!
console.log Я както думал что alert выводит тоже самое, Супер !!!! рони агромная вам благодарность |
| Часовой пояс GMT +3, время: 23:55. |