如何使用 javascript 或 jquery 根据其 id 合并 html table 列（或单元格）？

Question

我有以下 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>

在这个table中我想合并那些id值相同的单元格。

例如：

每一行我有 3 个单元格。我正在动态地将 id 值分配给每行的第三个单元格。现在我想合并那些 id 值彼此相同的单元格。像所有 td's 那些 ID 为 "7" 的人一样，我想将它们合并为单个单元格。类似地，td's 的 id 值为 "8" 和 "9" 作为一个单元格。像这样等等。我如何使用 jQuery 或 java 脚本来做到这一点？

Answer 1

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 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);
}

td {
    border: solid 1px black;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

Solution approach:-

您必须以这样一种方式更改逻辑，即每当出现类似的 id 时，例如，第一个记录中的 id="7" 然后放置一个 rowspan 属性并计算它出现的次数。因此，您可以将 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>

Answer 3

请查看此 js fiddle https://jsfiddle.net/wh5Lx1f0/ 我同意其他人的观点，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()



}

如何使用 javascript 或 jquery 根据其 id 合并 html table 列（或单元格）？

how to merge html table columns(or cells) based on their ids by using javascript or jquery?

javascript

jquery

html

merge

cells