如何使用javascript或jquery根据ID合并html表列（或单元格）？

我有下面的html

<table>
    <tbody>
    <tr>
        <td>text</td> 
        <td>text</td>
        <td id='7'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='7' >xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='8'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='8'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='8'>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='9' >xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='10' >xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
        <td id='10'>xyz</td>
    </tr>
    </tbody>
</table>

正文
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz

在这个表中，我想合并id值相同的单元格

例如：

每行有3个单元格。我动态地将id值分配给每行的第三个单元格。现在我想合并那些id值彼此相同的单元格。像所有的

td

一样，它们的id为

“7”

我想将它们合并为单个单元格。类似地，对于id值为

“8”

和

“9”

为一个单元格的

td

。像这样等等。如何使用jQuery或java脚本来实现这一点

var currentID;
var count = 1;
var lastRow;
$("table > tbody > tr").each(function () {
    var id = $(this).children(":eq(2)").attr("id");
    if (id === currentID) {
        count++;
        $(this).children(":eq(2)").remove();
    } else {
        $(lastRow).children(":eq(2)").attr("rowspan", count)
        currentID = id;
        count = 1;
        lastRow = this;
    }
});

if (count !== 1) {
    $(lastRow).children(":eq(2)").attr("rowspan", count);
}

var-currentID；
var计数=1；
var lastRow；
$（“table>tbody>tr”）。每个（函数（）{
var id=$（this.children（“：eq（2）”）.attr（“id”）；
如果（id==当前id）{
计数++；
$（this.children（“：eq（2）”）.remove（）；
}否则{
$（lastRow）.children（“：eq（2）”）.attr（“rowspan”，count）
currentID=id；
计数=1；
lastRow=这个；
}
});
如果（计数！==1）{
$（lastRow）.children（“：eq（2）”）.attr（“rowspan”，count）；
}

td{
边框：实心1px黑色；
}

文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz
文本
文本
xyz

您必须以这样一种方式更改逻辑，即每当出现类似的id时，例如，在第一条记录中，id=“7”，然后放置一个rowspan属性并计算它出现的时间。因此，您可以将行范围号n放在那里，然后从下面删除该id出现的位置。我假设这些id是连续分配的，而不是随机分配的

<tr>
        <td>text</td>
        <td>text</td>
        <td id='8' rowspan="N">>xyz</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
     </tr>

    <table class="tg">
  <tr>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
  </tr>
  <tr>
    <td class="tg-031e"></td>
    <td class="tg-031e" rowspan="2"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
</table>

文本
文本
>xyz
文本
文本

请查看这把js小提琴 我同意其他人的观点，ID必须是唯一的

var idToElementCount = {};
$('[data-id]').each(function() {
    var $this = $(this);
    var id = $this.attr('data-id');
    if(!idToElementCount.hasOwnProperty(id)) {
        idToElementCount[id] = 0;
    }

    idToElementCount[id]++;
});

for(var currentId in idToElementCount) {
    $('[data-id='+currentId + "]")
        .first()
        .attr("rowspan", idToElementCount[currentId])
        .end()
    .filter(":gt(0)")
    .remove()



}

---

ID应该是唯一的。那么您想使用rowspan吗？我只为要合并的单元格使用了唯一的ID。使用类定义要合并的单元格。您想在何处合并单元格？第一个单元格与同一类，还是最后一个单元格与同一类，或者特定单元格与特定类？@ArunPJohny任何操作都可以。

var idToElementCount = {};
$('[data-id]').each(function() {
    var $this = $(this);
    var id = $this.attr('data-id');
    if(!idToElementCount.hasOwnProperty(id)) {
        idToElementCount[id] = 0;
    }

    idToElementCount[id]++;
});

for(var currentId in idToElementCount) {
    $('[data-id='+currentId + "]")
        .first()
        .attr("rowspan", idToElementCount[currentId])
        .end()
    .filter(":gt(0)")
    .remove()



}