how to strike-through the text, in selected/checked row, in Bootstrap-table,

Question

I have a Bootstrap-table

<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-width="5px"></th>
    <th data-field="ID" data-visible="false"></th>
    <th data-field="Title" data-title="Title" data-align="left" valign-align="middle" data-width="auto"></th>
    <th data-field="Description" data-title="Message" data-align="left" valign-align="middle" data-width="70%"></th>
    ...

What i want to do is that when user checks any check-box, in 'Select' data-field, the Title and Description, change their appearance, say, strike-through/Italic. I want to use this ‘checkbox’ to give a visual indication to the user that these rows will be deleted from the database, once user click, a separate, ‘Delete’ button.

Thanks in advance.

could you accept one of the answers on this question please? thanks! — Martin Burch, May 10 '17 at 13:55

score 25 · Answer 1 · answered Feb 18 '17 at 21:04

25

Try this

tr.selected {
  text-decoration: line-through;
}

Here's a working fiddle: http://jsfiddle.net/e3nk137y/11801/

answered Feb 18 '17 at 21:04

Martin Burch

2,726
4
31
59

score 0 · Answer 2 · answered Sep 10 '15 at 14:35

0

Not too sure about checking for what is selected. jQuery may be useful in that scenario. Although, the CSS for this will be:

text-decoration: Line-Through

answered Sep 10 '15 at 14:35

Harvey

1,320
3
13
33

thanks Harvey, but i don't know how to get hold of that element, whose CSS I have to change to get this effect. – veeru Sep 10 '15 at 17:45
You could try adapting this JSFiddle example. This example is for expanding rows, but the jQuery will aid to select a particular row, I hope this helps! http://jsfiddle.net/mfwYS/ – Harvey Sep 10 '15 at 18:08
Duplicate Answer – Darlan Dieterich Jun 22 '18 at 17:26

how to strike-through the text, in selected/checked row, in Bootstrap-table,

2 Answers2