在模式或作为弹出窗口或警报对话框中单击单元格时显示表格单元格详细信息
[英]Show table cell details when cell is clicked in modal or as popoup or alert dialog
问题描述
I have designed Table with One row with title of month and cell that has inner table with separate rows and cell.I would like to show the content of any cell form innertable details when row of parent table is clicked.
我设计的表格只有一行，标题为月份，单元格的内部表格带有单独的行和单元格。我想在单击父表格的行时显示任何单元格形式的内部表格详细信息的内容。
For example, If any user click January, then it would show the details of events of Month of January as alert Dialog box/popup or alert Dialog box which can be later cancelled with close button.例如，如果任何用户单击一月，那么它将以警报对话框/弹出窗口或警报对话框的形式显示一月份的事件的详细信息，稍后可以使用关闭按钮将其取消。
Here is my 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>
Is it possible.可能吗。 Thanks for your any help in advance.感谢您提前提供任何帮助。
1 个解决方案
解决方案1
1 已采纳 2020-04-15 03:22:11
I hope this is what you asking?我希望这是你问的？
Also I see that you're not correctly using the tr and td s as expected you have to make each row for ex.我还看到您没有像预期的那样正确使用tr和td s，您必须为 ex 制作每一行。 january , feb etc... and not to create a table inside td , since the the below code checks on row as you requested the other contents too are in the row, which may alert again with only those child values. january 、 feb等...而不是在td中创建一个表，因为下面的代码在您请求时检查行，其他内容也在该行中，这可能会再次提醒只有那些子值。
What I am trying to say is try to order the data in row and data wise.我想说的是尝试按行和数据方式对数据进行排序。
$("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>
here is the sample example what you can achieve or you can further explore more options:这是您可以实现的示例示例，或者您可以进一步探索更多选项：
$(".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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.