我设计了带有月份标题的一行和单元格的表格，该单元格的内部表格具有单独的行和单元格。我想在单击父表格的行时显示任何单元格形式内部表格详细信息的内容。
例如，如果任何用户单击一月，那么它将显示一月事件的详细信息作为警报对话框/弹出窗口或警报对话框，稍后可以使用关闭按钮取消。
这是我的 table 。
<!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>有可能吗。感谢您提前提供的任何帮助。
最佳答案
我希望这就是你问的问题？
此外，我发现您没有按预期正确使用 tr 和 td ，您必须为 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>关于javascript - 在模式中单击单元格或作为弹出或警报对话框时显示表格单元格详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61220697/