Убедитесь, что каждая ячейка в таблице равна ячейке выше

Question

Как вы проверяете в JS, какое значение td выше текущего находится в таблице? Я пытаюсь получить такой стол:

|column1 | column2 | column3 | column4 | 
----------------------------------------
|        |         |         |         |
----------------------------------------
|        |         |  data   |         |
----------------------------------------
|        |         |  data   |   fox   |
----------------------------------------
|        |  bacon  |         |         |
----------------------------------------
|        |         |         |         |

Чтобы выглядеть так:

|column1 | column2 | column3 | column4 | 
----------------------------------------
|        |         |         |         |
----------------------------------------
|        |         |         |         |
--------------------  data   -----------
|        |         |         |   fox   |
----------------------------------------
|        |  bacon  |         |         |
----------------------------------------
|        |         |         |         |

Мой план состоял в том, чтобы пройтись по каждому элементу td, проверить html этого td, затем тот, что выше, и, если они равны, скрыть нижний и установить для ряда строк верхнего элемента значение 2.

У меня проблемы с итерацией по элементам td, я пробовал некоторые jQuery, например:

 $("#myTable td").each(function(){
     console.log($(this).html())
 });

Но я не могу легко получить доступ к ячейке выше / ниже текущей. Есть идеи?

Answer 1

Может быть, что-то вроде этого:

$("#myTable td").each(function(){
    var thisRowNum = $(this).closest('tr').prevAll().length;

    var thisColNum = $(this).prevAll().length;

    var cellAbove = $(this)
        .closest('table')
        .find('tr:eq('+thisRowNum+') td:eq('+thisColNum+')'); // the cell

    var thisCell = $(this).html();
    if (thisCell !== "") {
        if ((thisCell === cellAbove.html())) {
            $(this).hide();
            cellAbove.attr("rowspan","2");
        }
    }

 });

Answer 2

Я не пробовал на реальной странице, но теоретически это должно работать:

<script type="text/javascript" charset="utf-8">
    var container = ".mytable tbody > tr";
    var td_index, row_index = 0;

    $(container).each(function() {
        td_index = -1;
        row_index++;
        if(row_index > 0) {
            td_index ++;
            var above_tr = $(container+"eq("+(row_index-1)+")");
            var td_val = $(this).find("td:eq("+td_index+")").html();
            var above_td_val = $(above_tr).find("td:eq("+td_index+")").html();
            if(td_val == above_td_val) {
                $(above_tr).find("td:eq("+td_index+")").attr("rowspan", 2);
                $(this).find("td:eq("+td_index+")").remove();
            }
        }

    });
</script>

Answer 3

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

var above = [];

$('#myTable tr').each(function()
{
  $(this).children('td').each(function(i)
  {
    if (above.length > i && $(above[i]).text() == $(this).text()) 
    {
      $(above[i]).attr('rowspan', ($(above[i]).attr('rowspan') || 1) + 1);
      $(this).remove();
    }
    else
    {
      above[i] = this;
    }
  });
});

Answer 4

Если вы хотите это сделать, получите строки и столбцы, а затем создайте массив (двумерный массив и зациклите его. Это дает вам гораздо большую гибкость. Но я бы сказал, что эту работу следует выполнять насерверный язык, который вы выбрали, например, JSP, ASP, PHP и т. д., который дает вам большой контроль.