如何显示多列可点击项目的列表？答案

【问题标题】：How do I display list of multi-column clickable items?如何显示多列可点击项目的列表？
【发布时间】：2019-01-16 19:09:38
【问题描述】：

我正在做一个项目，我正在尝试显示消息列表。我想在每一行中有多个字段（发送者、消息、日期），并且可以点击（然后显示消息所属的线程）。

这是我目前所拥有的。 https://imgur.com/a/uU1sm64

我在对齐行中的数据时遇到问题。现在，我将它们作为每行一个 ListItem 下的三个 ListItemText 组件。我尝试使用表格，但无法使用 OnClick 函数。

获得对齐的可点击多列列表的最佳方法是什么？类似于 gmail 的网页界面。

谢谢。

【问题讨论】：

标签： node.js reactjs material-ui

【解决方案1】：

这是您正在寻找的解决方案吗？我使用了引导悬停表。单击表格行时，我得到第一个单元格的内容。也许您应该尝试从选定的表格行中获取消息 ID 或相关内容。

$("#display-table tr").click(function(){
   $(this).addClass('selected').siblings().removeClass('selected'); 
   var value=$(this).find('td:first').html();
   alert(value);    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<table id="display-table" class="table table-hover">
    <thead>
        <th>Sent By</th>
        <th>Message</th>
    </thead>
    <tbody>
        <tr>
            <td>ABC User</td>
            <td>how-do-i-display-list-of-multi-column-clickable-items</td>
        </tr>
        <tr>
            <td>ADC User</td>
            <td>how-do-i-display-list-of-multi-column-clickable-items</td>
        </tr>
        <tr>
            <td>ADE User</td>
            <td>how-do-i-display-list-of-multi-column-clickable-items</td>
        </tr>
    </tbody>
</table>

【讨论】：