HTML 表行跨度条件

Question

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

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

任何人都可以帮忙吗？

Answer 1

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

我不知道您使用的是哪种服务器端语言；假设您使用的是 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 
} 
?>

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

如果您不想将自定义 class 添加到表中的所有tr标记，则此代码将添加此功能的所有表，然后将常量行的值分配给document.getElementsByClassName("classname")和这个只会将此功能添加到此表