HTML 表格行跨度条件答案

【问题标题】：HTML Table Rowspan ConditionalHTML 表格行跨度条件
【发布时间】：2022-01-17 18:59:00
【问题描述】：

我有这个 html 表，其中有一个“用户 ID”列，其中包含一些相同的值。我想使用 rowspan 对相同的值进行合并。

但是，我拥有的数据是动态数据，所以我不想写 rowspan="(number)"。我想要的输出是像这样动态合并“用户ID”中的相同数字：

谁能帮忙？

【问题讨论】：

标签： html json html-table

【解决方案1】：

我能理解你实际上想要做什么。这可以通过多种方式完成。使用一些复杂的逻辑也可以调节行跨度。但我会用最简单的方法。示例：

我不知道您使用的是哪种服务器端语言；假设您使用的是 PHP。所以，

首先，只需编写两个函数。第一个用于从数据库表中获取“用户 ID”。第二个用于根据用户 ID 获取用户数据。

<?php 
function user_ids(){
    $stmt = $conn->prepare("SELECT `user_id` FROM `table` GROUP BY user_id);
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    return $result;
}

function user_ids($user_id){
    $stmt = $conn->prepare("SELECT *FROM `table` WHERE user_id = ?);
    $stmt->execute(array($user_id));
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    return $result;
}

$user_ids = user_ids();
foreach($user_ids as $data){
?> 
<tr>
   <td><?= $data['user_id'] ?></td>
   <td>
      <table>
         <?php
          $user_data = user_data($data['user_id']);
          foreach($user_data as $x){ ?>
          <tr>
            <td><?= $x['id'] ?></td>
            <td><?= $x['title'] ?></td>
            <td><?= $x['body'] ?></td>
          </tr>
         <?php } ?>
      </table>
   </td>
</tr>

<?php 
} 
?>

【讨论】：

【解决方案2】：

完成这个任务需要一些Js -

  let presentElem = {};
  let removedElem = [];
  const rows = document.getElementsByTagName("tr");
  Array.from(rows).forEach(element => {
    if (presentElem[element.innerText.charAt(0)]){ 
      element.deleteCell(0);
      removedElem.push(element.firstChild)
    }
    else presentElem[element.innerText.charAt(0)] = element.firstChild;
  })
  Object.keys(presentElem).forEach(element => {
    presentElem[element].setAttribute("rowspan", removedElem.length )
  })

如果您不希望将自定义类添加到表中的所有 tr 标记，此代码将添加此功能所有存在于文档中的表，然后将常量行的值分配给 @987654323 @ 并且这只会将此功能添加到此表中

【讨论】：