Question

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

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

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

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

谢谢。

Answer 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>

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

1 个答案: