如何基于<；合并行；td>；上课？（Javascript）

我目前正在尝试这样做，当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();
      }
}

if（！$（this）.hasClass（'paid'））{
var table=$（“#property_dtl_table_body”）；
var行=table.find（$（“tr”）；
var ColslLength=2；
var removeLater=新数组（）；
对于（变量i=1；i=1）{
console.log（lastIndex+“-”+startIndex）
//log（$（$（行[startIndex]）.find（“td”）[i]））
$（$（行[startIndex]）.find（“td”）
[i] ）.attr（“rowspan”，spanLength+1）；
}
console.log（“--”）；
}
用于（拆卸器中的var i）{
$（removeLater[i]）。remove（）；
}
}

所讨论的类（#paid）由绿色背景色表示，如下所示：

在JS之前：

在JS之后：

预期结果：

---

您可以选择以下逻辑：

• 从第一年开始
• 循环浏览下一年的td，直到你找到一个不同的td，然后数一数
• 找到一个后，将第一个td的行跨度设置为介于两者之间的元素数
• 移除所有你循环通过的td
• 重复此过程直到结束

同一类限制仅适用于用于获取所有tds的选择器

例如：

函数mergeByClass（类名）{
设currTd，count=0；
$（`tr>${className}`）。每个（函数（）{
if（！currTd）//如果是第一个，则将其设置为当前
currTd=$（本）；
否则{//如果不是
如果（$（this.text（）==currTd.text（））{//检查它是否是重复的
count++；//如果是，则计数
$（this）.remove（）；//并将其删除以正确合并
}
否则{//如果它是另一个
if（count>=1）//如果中间有1个或多个，则合并
当前属性（“行范围”，计数+1）；
currTd=$（this）；//重置当前值
计数=0；
}
}  
});
if（count>=1）//最后一个元素的大小写
当前属性（“行范围”，计数+1）；
}
$（“#合并”）。在（“单击”，（）=>mergeByClass（“付费”）
td{
边框：1px纯黑；
填充：15px；
}

单击以合并具有相同类的行
2015322.97
2015322.97
2016322.97
2016322.97
2017322.97
2017322.97
2017322.97
2018322.97
2018322.97
不考虑他们的类别，你是什么意思？提供一个输出应该是什么样子的示例。必须将预期结果的图片添加到问题的底部
id=“pin”
id=“price”
-在循环中？哦，孩子。这不会有好的结局。