Форум

M@x · #1 (**permalink**) 07.12.2015, 16:22

Добрый день! У меня есть таблица:

<table name="table">
<tbody>
  <tr>
    <td>1</td>
    <td class="tempdat-1">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-2">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-3">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-4">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-5">test2</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-6">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-7">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-8">test2</td>
  </tr>
  <!-- строк очень много-->
</table>

которая формируется динамически из php-скрипта. Первый столбец всегда заполнен "1", а второй может иметь разные значения, но как видно из примера - они могут и будут повторяться. Задача в том, чтобы скрыть, но не удалять со страницы строки в которых значения второго столбца одинаковые, оставив при этом одно уникальное значение, т.е. таблица после обработки скриптом должна иметь вид:

<table name="table">
<tbody>
  <tr>
    <td>1</td>
    <td class="tempdat-1">test</td>
  </tr>
  <tr hidden>
    <td>1</td>
    <td class="tempdat-2">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-3">test1</td>
  </tr>
  <tr hidden>
    <td>1</td>
    <td class="tempdat-4">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-5">test2</td>
  </tr>
  <tr hidden>
    <td>1</td>
    <td class="tempdat-6">test1</td>
  </tr>
  <tr hidden>
    <td>1</td>
    <td class="tempdat-7">test</td>
  </tr>
  <tr hidden>
    <td>1</td>
    <td class="tempdat-8">test2</td>
  </tr>
  <!-- строк очень много-->
</table>

Как я вижу решение - собрать уникальные значения из второго столбца и сравнить с таблицей. Так я получаю массив с уникальными значениями

var  uRows = {};
var  hiddenData = document.querySelectorAll("[class^='tempdat-']");
         for (var j=0; j<hiddenData.length; j++)  {
			 var numb = hiddenData[j].innerHTML;
           uRows[numb] = (uRows[numb]||0)+1;
         };

А дальше ни как

Помогите пожалуйста сравнить мой массив с таблицей для решения задачи

Или может быть есть другой способ... Буду рад любой помощи. Спасибо за помощь и понимание.

laimas · #2 (**permalink**) 07.12.2015, 16:57

Сообщение от M@x

Задача в том, чтобы скрыть, но не удалять со страницы строки в которых значения второго столбца одинаковые, оставив при этом одно уникальное значение

А что серверу эта задача не по зубам? Или же на клиенте надо скрывать/показывать?

M@x · #3 (**permalink**) 07.12.2015, 17:04

Серверу по зубам и как на нем сделать я знаю, но есть необходимость скрывать на клиенте.

рони · #4 (**permalink**) 07.12.2015, 17:13

M@x,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .hide{
      display: none;
    }

  </style>
</head>

<body>
<table name="table">
<tbody>
  <tr>
    <td>1</td>
    <td class="tempdat-1">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-2">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-3">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-4">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-5">test2</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-6">test1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-7">test</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="tempdat-8">test2</td>
  </tr>
</tbody>
  <!-- строк очень много-->
</table>
<script>
var uRows = {},
    hiddenData = document.querySelectorAll("[class^='tempdat-']");
[].forEach.call(hiddenData, function(td) {
    var numb = td.innerHTML;
    if (!uRows[numb]) uRows[numb] = true;
    else td.parentNode.classList.add("hide")
});
</script>
</body>

</html>

Decode · #5 (**permalink**) 07.12.2015, 17:20

M@x, как вариант:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
</head>
<body>
    <table name="table">
        <tr>
            <td>1</td>
            <td class="tempdat-1">test</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-2">test</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-3">test1</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-4">test1</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-5">test2</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-6">test1</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-7">test</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="tempdat-8">test2</td>
        </tr>
        <!-- строк очень много-->
    </table>

    <script>
        var tdElemsList = [].slice.call( document.querySelectorAll("[class^='tempdat-']") ),
            tmpArr = [];

        tdElemsList.forEach(function(item) {
            (tmpArr.indexOf(item.textContent) == '-1') ? tmpArr.push(item.textContent) : item.parentNode.style.display = 'none';
        });

        alert(tmpArr);
    </script>
</body>
</html>

laimas · #6 (**permalink**) 07.12.2015, 18:04

Сообщение от M@x

Серверу по зубам и как на нем сделать я знаю, но есть необходимость скрывать на клиенте.

Вы не ответили на вопрос - скрывать означает показывать или нет? Если нет, зачем выводить - на этапе SQL запроса эту задачу можно решить - выборка вернет только уникальные значения.
Но если уж так охота иметь их и не показывать, то сразу при выводе на сервере скрыть. Зачем пустой задачей нагружать клиент, если постоянно скрыто?

M@x · #7 (**permalink**) 08.12.2015, 09:18

рони, Decode, огромное спасибо! Два дня через циклы пытался добиться результата... А решение - вот оно, все оказалось много проще. Спасибо

Были попытки через indexOf, но немного не понял я этого метода...
laimas, в моем случае скрывать означает не показывать. Я понимаю, что все это можно и желательно делать на сервере, чтоб не нагружать клиент. Но я привел в пример не полную таблицу, у меня там еще столбцов 10, значения которых различаются и будут нужны позже.

laimas · #8 (**permalink**) 08.12.2015, 14:50

Сообщение от M@x

в моем случае скрывать означает не показывать.

Значит их и близко не должно быть на клиенте, а только те, "что могут потребоваться", и делается это на сервере до бессовестного просто.

Форум

Справочник

Discord чат

Курсы javascript