Question

如何检查JS在当前表中的td值是多少？我想找个像这样的桌子：

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

看起来像这样：

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

我的计划是遍历每个td元素，检查该td的html，然后检查上面的那个，如果它们相等，则隐藏底部的那个，并将顶部的行数设置为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

如果你想这样做，获取行和列，然后创建一个数组（它的2-D arraY并循环它。它给你更多的灵活性。但我会说这个工作应该在您选择的服务器端语言，如JSP，ASP，PHP等......这可以让您获得很大的控制权。

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

我没有在实际页面上尝试过，但从理论上说这应该可行：

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

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

4 个答案: