在模式中单击单元格时显示表格单元格详细信息或弹出或警报对话框答案

【问题标题】：Show table cell details when cell is clicked in modal or as popoup or alert dialog在模式中单击单元格时显示表格单元格详细信息或弹出或警报对话框
【发布时间】：2020-04-15 03:09:46
【问题描述】：

我设计了一个表格，其中一行标题为月份，单元格具有单独的行和单元格的内部表格。我想在单击父表格行时显示任何单元格表格内部表格详细信息的内容。

例如，如果任何用户单击一月，则它将显示一月事件的详细信息作为警报对话框/弹出窗口或警报对话框，稍后可以使用关闭按钮取消。

这是我的桌子。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>Events</h1>

<table>
  <tr>
    <th>Month</th>

  </tr>
  <tr>
    <td>January

<table>
  <tr>
    <td>Events</td>
  </tr>

  <tr>
    <td>This is information I want to show as modal when this January cell is clicked</td>
  </tr>

</table>

    </td>
 
  </tr>




  <tr>
    <td>February

<table>
  <tr>
    <td>Events</td>
  </tr>

  <tr>
    <td>This is information I want to show as modal when this Feburary cell is clicked</td>
  </tr>

</table>

    </td>
 
  </tr>

</table>
 
</body>
</html>

有没有可能。感谢您提前提供的任何帮助。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我希望这是你的要求？

我还看到您没有按预期正确使用 tr 和 tds，您必须为 ex 制作每一行。 january，feb 等...而不是在 td 内创建表，因为下面的代码检查行，因为您请求的其他内容也在行中，这可能会再次提醒那些孩子价值观。

我想说的是尝试按行和数据明智地对数据进行排序。

$("table tr").click(function() {
  alert($(this).children("td").text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <h1>Events</h1>

  <table>
    <tr>
      <th>Month</th>

    </tr>
    <tr>
      <td>January

        <table>
          <tr>
            <td>Events</td>
          </tr>

          <tr>
            <td>This is information I want to show as modal when this January cell is clicked</td>
          </tr>

        </table>

      </td>

    </tr>




    <tr>
      <td>February

        <table>
          <tr>
            <td>Events</td>
          </tr>

          <tr>
            <td>This is information I want to show as modal when this Feburary cell is clicked</td>
          </tr>

        </table>

      </td>

    </tr>

  </table>

</body>

</html>

这是您可以实现的示例示例，或者您可以进一步探索更多选项：

$(".MainTable tr").click(function() {
  alert($(this).children("td").text());
});

.MainTable,
tr,
td {
  border: 1px solid red;
  width: 80%;
}

.row td {
  display: flex;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

  <h1>Events</h1>

  <table class="MainTable">
    <tr>
      <th>Month</th>

    </tr>

    <tr class="row">
      <td>January
      </td>
      <td>Events</td>
      <td>
        This is information I want to show as modal when this January cell is clicked
      </td>
    </tr>

    <tr class="row">
      <td>
        February
      </td>
      <td>Events</td>
      <td>
        This is information I want to show as modal when this February cell is clicked
      </td>
    </tr>

  </table>

</body>

【讨论】：

这很棒。第一个选项对我有用..但是我也会用第二个建议进行探索。只是为了改变我确实将表更改为表表 tr，因为我的目标是第二个表。如何仅在我们执行 td:nth-child() 的 css 中定位第 n 个孩子，我希望显示第 2 个单元格的详细信息，但其他单元格应保持静态。现在它在事件单元格和详细信息单元格中显示警报，我只想限制详细信息单元格。
很高兴它有帮助！如果你有多个表，你应该总是有选择器类，这将帮助你获得你真正需要的东西，来到 nth-child() 你有 n 可获取的文章数量，逻辑和我上面提到的一样不用担心，继续探索吧！干杯。对于表到表 tr，而不是像我在代码（MainTable）等中那样使用选择器类。