如何基于类合并行？ （JavaScript）的

Question

我目前正在尝试这样做，以便当JS代码执行其操作时，将合并具有公共值和公共类的行。代码工作，但所有常见的行都合并而没有考虑他们的类。

表格代码：

<tbody id="property_dtl_table_body">
   <% dtls.each do |f| %>
   <tr class="<%= payment_paid(f.paid)%>" id="paidrow">
     <td>
       <% if !f.paid %>
       <%= check_box_tag "pin_number[]", f.id, checked= !f.paid? %>
       <%end%>
     </td>

     <td id="pin"><%= f.year %></td>
     <td><%= f.quarter %></td>
     <td align="right" id="price"><%= number_to_currency(f.amount, unit: "", 
precision: 2)%></td>

  </tr>
  <%end%>
</tbody>

JS代码：

if(!$(this).hasClass('paid')){
    var table = $("#property_dtl_table_body");
    var rows = table.find($("tr"));
    var colsLength = 2;
    var removeLater = new Array();
    for(var i=1; i<colsLength; i++){
        var startIndex = 0;
        var lastIndex = 0;
        var startText = $($(rows[0]).find("td")[i]).text();
        for(var j=1; j<rows.length; j++){
            var cRow =$(rows[j]);
            if(!$(this).hasClass('paid')){
            var cCol = $(cRow.find("td")[i]);
            }
            var currentText = cCol.text();
            if(currentText==startText){
                cCol.css("background","gray");
                console.log(cCol);
                removeLater.push(cCol);
                lastIndex=j;
            }else{
                var spanLength = lastIndex-startIndex;
                if(spanLength>=1){
                    console.log(lastIndex+" - "+startIndex)
                    //console.log($($(rows[startIndex]).find("td")[i]))
                    $($(rows[startIndex]).find("td")
[i]).attr("rowspan",spanLength+1);
                }
                lastIndex = j;
                startIndex = j;
                startText = currentText;
            }

        }
        var spanLength = lastIndex-startIndex;
                if(spanLength>=1){
                    console.log(lastIndex+" - "+startIndex)
                    //console.log($($(rows[startIndex]).find("td")[i]))
                    $($(rows[startIndex]).find("td")
[i]).attr("rowspan",spanLength+1);
                }
        console.log("---");  
      }

      for(var i in removeLater){
          $(removeLater[i]).remove();
      }
}

有问题的课程（#paid）由绿色背景颜色表示，如下所示：

在JS之前：

JS之后：

预期结果：

Answer 1

您可以采用以下逻辑：

• 从第一年开始td
• 循环到明年的td，直到找到另一个并计算它们
• 找到一个时，将第一个td的rowspan设置为
之间的元素数
• 删除所有通过
循环的td
• 重复此过程直至结束

相同的classe限制仅适用于您用于获取所有tds的选择器。

示例：

function mergeByClass(className){
    let currTd, count = 0;

    $(`tr > .${className}`).each(function(){
        if (!currTd) //if its the first one set it as current
            currTd = $(this);
        else { //if its not
            if ($(this).text() == currTd.text()){ //check if its a repeating one
                count++; //count if it is
                $(this).remove(); //and remove it to properly merge
            }
            else { //if its a different one
                if(count >= 1) //merge if it has 1 or more in between
                    currTd.attr("rowspan", count + 1);

                currTd = $(this); //reset the current one
                count = 0;
            }
        }  
    });

    if (count >= 1) //last element case
        currTd.attr("rowspan", count + 1);
}

$("#merge").on("click", () => mergeByClass("paid"));

td {
  border: 1px solid black;
  padding : 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="merge">Click to merge rows with the same class</button>

<table>


  <tr>
    <td class="paid">2015</td><td>3</td><td>22.97</td>
  </tr>
  <tr>
    <td class="paid">2015</td><td>3</td><td>22.97</td>
  </tr>

  <tr>
    <td>2016</td><td>3</td><td>22.97</td>
  </tr>

  <tr>
    <td>2016</td><td>3</td><td>22.97</td>
  </tr>

  <tr>
    <td>2017</td><td>3</td><td>22.97</td>
  </tr>

  <tr>
    <td>2017</td><td>3</td><td>22.97</td>
  </tr>
  <tr>
    <td>2017</td><td>3</td><td>22.97</td>
  </tr>

  <tr>
    <td class="paid">2018</td><td>3</td><td>22.97</td>
  </tr>

  <tr>
    <td class="paid">2018</td><td>3</td><td>22.97</td>
  </tr>


</table>