时间戳

首页 > 解决方案 > 循环表时出现意外行为

javascript - 循环表时出现意外行为

问题描述

我在遍历 API 数组时创建了一个表，但遇到了一些问题。这是重复的 HTML ->

$html = "
    <tr class='mt-2'>
        <td>{$rank}.</td>
        <td><img src='{$image}' height='75' width='75'></td>
        <td>{$name}</td>
        <td class='bold'>\${$final_worth}B</td>
        <td class='{$class}'>\${$last_change}</td>
        <td>{$country}</td>
        <td>{$source}</td>
        <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td>
    </tr>
    <tr >
        <div id='details'>lorem ipsum wahoo baby</div>
    </tr>

    ";

在我添加第二行（div#details）之前，一切都按预期进行。

这里实际上有两个问题 - 第一个是我如何使每个按钮/div#details 连接，所以 button1 只影响 div1 等。

不过我还不能解决这个问题，因为现在当单击任何按钮时，div#details 会显示在表格标题上方而不是前一行下方。

因此，在我定位正确之前，我无法真正解决 js 功能。有人可以告诉我为什么<tr><div#details>它没有出现在它的前一行下面吗？js代码如下->

<script>
  var cnt = <?php echo $cnt; ?>;
  function showDetails(cnt) {
      var details = "details";
      var x = document.getElementById(details);
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
    
</script>

我知道代码现在一团糟。这有点可耻，哈哈，但就像我说的那样，在我弄清楚为什么那个表格行没有正确定位之前，我真的不能做更多的事情

标签： javascripthtml

解决方案

尝试将其更改为

<tr>
    <td colspan='8' id='details'>lorem ipsum wahoo baby</td>
</tr>

如果它不在单元格中，则会从表格中被拒绝，这就是它出现在上方的原因。

推荐阅读