检查表中的每个单元格是否等于上面的单元格

Question

How do you check in JS what the value of the td above the current one is in a table? I'm trying to get a table like this:

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

To look like this:

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

My plan was to loop through each td element, to check the html of that td, then the one above, and if they are equal, hide the bottom one, and set the rowspan of the top one to 2.

I'm having trouble iterating through the td elements, I've tried some jQuery like this:

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

But I can't access easily the cell above/below the current one. Any ideas?

Answer 1

Maybe something like this:

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

如果您想这样做，请获取行和列，然后创建一个数组（对其进行二维排列并循环执行）。它为您提供了更大的灵活性。但是我想说，这项工作应该在服务器端语言下进行您选择了诸如JSP，ASP，PHP等...，它给了您很多控制权。

Answer 3

You could write a traversal algorithm yourself, storing the values from row to row.

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

I didn't try it on an actual page, but in theory this should work:

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