动态展开和折叠表格行答案

【问题标题】：Dynamically expand and collapse a table row动态展开和折叠表格行
【发布时间】：2020-02-22 13:21:26
【问题描述】：

我正在尝试实现一个引导表，当用户单击放置在第一列上的按钮时，特定行会展开并显示更多详细信息。

作为参考，我正在尝试实现类似于：

https://datatables.net/examples/server_side/row_details.html

但是，我不打算使用 DataTables 框架。

该表不应包含页面加载时所有行的详细信息。基本上，当单击按钮时，我希望发送一个 ajax 请求（使用 beforeSend 函数将出现一个 ajax 加载屏幕），当成功执行 ajax 函数时，应该使用通过 ajax 获取的详细信息来扩展特定行，当然加载屏幕覆盖将被隐藏）。然后，当点击与展开的行相关的按钮时，该行应该被折叠。

我只是在寻找此实施的入门指南。

你们能帮帮我吗？

【问题讨论】：

标签： javascript jquery ajax bootstrap-4

【解决方案1】：

这是一个很好的问题！我很乐意为您提供帮助。

首先- 调用您的信息的 XML 文件 (database.xml)（根据需要扩展）：

<?xml version = '1.0' encoding='utf-8' ?>
<database>
   <row id = '1'>
      <user>
          <name>Bob</name>
          <joined>10-10-2019</joined>
      </user>
   </row>
   <row id = '2'>
      <user>
          <name>Fred</name>
          <joined>10-11-2019</joined>
      </user>
   </row>
</database>

第二- 一个带有表格的php文件（index.php）：

<html>
   <head>
   </head>
   <body>
      <table>
          <?
          $users = simplexml_load_file('database.xml');
          foreach ($users-row) as $row {
             echo '<tr class = "row '.$row['id'].'">'
             echo '<td class = "expand"><div role = "button" class = "expand-button '.$row['id'].'">Expand</div></td>'
             echo '<td class = "username">'.$row->name.'</td>';
             echo '</tr>';
          }
          ?>
      </table>
   </body>
</html>

第三- 带有 XMLHTTPRequest 的 JavaScript 文件调用 php 文件 (app.js)：

const getClass = (c) => document.getElementsByClassName(c);
for (let i = 0; i < getClass('expand-button').length; i++) {
   getClass('expand-button')[i].addEventListener('click', expand, false);
}
function expand(e) {
   let xhr = new XMLHTTPRequest();
   xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         getClass('row '+e.target.className.split(' ')[1]).innerHTML += xhr.responseText;
      }
   };
   xhr.open('GET', 'retrieveUsers.php?rowId='+e.target.parentElement.className.split(' ')[1], true);
   xhr.send();
}

第四个-（最后！）处理请求的 php 文件：

<?
$rowId = $_GET['rowId'];
$users = simplexml_load_file('database.xml');
foreach ($users-row) as $row {
   if ($row['id'] === $rowId) {
      echo '<tr class = "expanded">';
      echo 'Username: '.$row->name;
      echo '<br />Joined: '.$row->joined;
      echo '</tr>';
   }
}
?>

告诉我这是否有效

【讨论】：

您好，感谢您的回答。我没有使用 php，但它让我大致了解了我必须做什么。我已经设法建立了一个表格，作为开始，可以根据模型数据对其行进行扩展和折叠。我想我真正想弄清楚的是，从 html 的角度来看，扩展表格行实际上意味着什么。现在我基本上附加了一个带有 td 和 colspan 的 tr 元素，该元素又包含另一个具有固定布局的表，并且 td 元素具有样式属性“word-wrap:break-word;”。因为该表包含日志条目，其中一些非常长。