如何在 Bootstrap 表中的选定/选中行中删除文本,

Posted

技术标签:

【中文标题】如何在 Bootstrap 表中的选定/选中行中删除文本,【英文标题】:how to strike-through the text, in selected/checked row, in Bootstrap-table, 【发布时间】:2015-12-06 21:48:20 【问题描述】:

我有一个引导表

<table id="tblTodaysNews"
..
data-click-to-select="true"
data-response-handler="responseHandler">
<thead>
    <tr>
    <th data-field="Select" data-checkbox="true" data-align="center" valign-align="middle" data-></th>
    <th data-field="ID" data-visible="false"></th>
    <th data-field="Title" data-title="Title" data-align="left" valign-align="middle" data-></th>
    <th data-field="Description" data-title="Message" data-align="left" valign-align="middle" data-></th>
    ...     

我想要做的是,当用户选中任何复选框时,在“选择”数据字段、标题和说明中,更改它们的外观,例如删除线/斜体。 我想使用这个“复选框”向用户提供视觉指示,一旦用户单击,这些行将从数据库中删除,一个单独的“删除”按钮。

提前致谢。

【问题讨论】:

你能接受这个问题的答案之一吗?谢谢! 【参考方案1】:

试试这个

tr.selected 
  text-decoration: line-through;

这是一个有效的小提琴: http://jsfiddle.net/e3nk137y/11801/

【讨论】:

【参考方案2】:

不太确定是否检查所选内容。 jQuery 在这种情况下可能很有用。虽然,这方面的 CSS 将是:

text-decoration: Line-Through

【讨论】:

感谢 Harvey,但我不知道如何获取该元素,我必须更改其 CSS 才能获得此效果。 您可以尝试调整这个 JSFiddle 示例。此示例用于扩展行,但 jQuery 将帮助选择特定行,我希望这会有所帮助! jsfiddle.net/mfwYS 重复答案

以上是关于如何在 Bootstrap 表中的选定/选中行中删除文本,的主要内容,如果未能解决你的问题,请参考以下文章

如何在结果表中仅显示选定的记录

表中的 Bootstrap 4 下拉菜单

如何从 agggrid 中的选定行中删除蓝色

POI操作Excel如何禁止Excel中的复制和选定?

如何使用 bootstrap 中的 selectpicker 插件在选择时设置选定值

使用 Javascript/jquery 如何从选定行中的每个单元格获取值