Форум

avantyrist · #1 (**permalink**) 07.02.2015, 22:37

Добрый день, Потихоньку пытаюсь освоить 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');

Пожалуста помогите, второй день не отхожу от компа

(

рони · #2 (**permalink**) 08.02.2015, 01:19

Сообщение от avantyrist

как определить значение всех ячеек

через цикл each или map

рони · #3 (**permalink**) 08.02.2015, 01:43

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>

avantyrist · #4 (**permalink**) 08.02.2015, 15:59

Рони спасибо Вам, всё работает, но я не могу понять как

(
если не тяжело подскажите плиз....

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  то клас присвоится всем строкам,почему так ?? :(
	})

Вообше не пойму каким образом ето всё работает, очень хочется понять, документации я много перечитывал, но документация и практика, ето разные вещи,
ешё раз ОГРОМНОЕ спасибо

рони · #5 (**permalink**) 08.02.2015, 16:19

Сообщение от avantyrist

я как понял указанный в конце this какраз и даёт возможность перебора в текущей строке ??

да
len количество ячеек до фильтраци
фильтруем ячейки сравнивая текст любой с эталоном text (я взял первую для эталона, вы вторую) -- смотрим сколько ячеек осталось после фильтрации -- если одинаково len == td =>true строке присвоится класс смотрите документацию на toggleClass http://api.jquery.com/toggleClass/#t...lassName-state
td сначала хранит все ячейки потом количество после фильтрации

avantyrist · #6 (**permalink**) 08.02.2015, 22:57

Понял практически всё

Тока вот я немогу понять одного момента никак, момент который меня изначально в ступор поставил:
Пытаясь посмотреть что td содержит в себе до фильтрации,

alert ("Переменная td до фильтрации --- " +td);

Вижу вот такой результат:
[object Object] - что оно такое ??

и никак не могу понять что ето означает О_о
можно каким то образом посмотреть-вывести содержимое td до фильтрации?? или надо просто условно понимать, что туда записались какието значения, но а в каком виде они там лежат ?

куча вопросов

рони · #7 (**permalink**) 08.02.2015, 23:05

avantyrist,
это обьект jQuery
добавить console.log(td) в код нажать F12

avantyrist · #8 (**permalink**) 08.02.2015, 23:09

Вот за ето я туканул !!!
console.log
Я както думал что alert выводит тоже самое, Супер !!!!
рони агромная вам благодарность

Форум

Справочник

Discord чат

Курсы javascript