使用jQuery合并表格单元格

Question

我需要使用jQuery合并特定列的表格单元格。

输入表格：
结果表格：
如何实现呢？

- Ramesh

---

请展示您当前使用的标记和jQuery，表格是如何构建的？数据是静态的吗？为什么需要以编程方式进行操作？请删除图像上的空白空间。 - atmd

@atmd “为什么需要以编程方式完成？” - 我猜OP希望合并给定列中相同值的后续单元格。这将是一个有趣的问题 - 当然不是突破性的。 - John Weisz

给出的表格只是一个示例。我的实际需求是，我有一个 jQuery 数据表格，我的要求是，在该表格中考虑第 10 列，将每一行的第 10 列文本与下一行的第 10 列进行比较，如果匹配，则需要合并第一行的第 10 个单元格和第二行的第 10 个单元格。这是我的要求。 - Ramesh

添加一个代码片段... - ROMANIA_engineer

@JánosWeisz，您可能是正确的，我写下这条评论是希望能够更新问题并添加更多上下文和代码示例。可惜没有更新。 - atmd

Answer 1

演示

您可以给第三行设置类，然后使用下面的jQuery代码合并单元格。

HTML和jQuery

$('.third-row td:eq(2)').attr('rowspan','2').parent().next().find('td:eq(2)').remove()

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<table border="1" width="100%">
<tr>
 <td>1</td>
 <td>1</td>
 <td>1</td>
 <td>1</td>
</tr><tr class="third-row">
 <td>1</td>
 <td >2</td>
 <td>3</td>
 <td>4</td>
</tr><tr>
 <td>1</td>
  <td>2</td>
 
 <td>5</td>
 <td>6</td>
</tr></table>

更新:

不需要给行添加类，您可以通过jQuery的eq()函数实现此功能。

- shyammakwana.me

Answer 2

我想这就是您想要的内容。

$(document).ready(function(){
      
      var el = $("tr td:last-child");
      for(var i = 0; i < el.length; i++){
        if (el[i].innerHTML == el[i+1].innerHTML){
          el[i].setAttribute("rowspan","2");
          el[i+1].parentElement.removeChild(el[i+1])
        }
      }  
      
      
    });

td, th, tr, table {
      border: solid 1px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <table corder="1" class="reference" style="width:100%">
    <tbody><tr>
     <th>Number</th>
     <th>First Name</th>
     <th>Last Name</th>  
     <th>Points</th>
    </tr>
    <tr>
     <td>1</td>
     <td>Eve</td>
     <td>Jackson</td>  
     <td>94</td>
    </tr>
    <tr>
     <td>2</td>
     <td>John</td>
     <td>Doe</td>  
     <td>80</td>
    </tr>
    <tr>
     <td>3</td>
     <td>Adam</td>
     <td>Johnson</td>  
     <td>80</td>
    </tr>
    <tr>
     <td>4</td>
     <td>Jill</td>
     <td>Smith</td>  
     <td>50</td>
    </tr>
    </tbody></table>

- Yerko Palma

---

请注意，for循环内部只是JavaScript代码，没有jQuery。 - Yerko Palma