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

bootstrap-table
veeru picture veeru · Sep 10, 2015 · Viewed 19.2k times · Source

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.

Answer

Martin Burch picture Martin Burch · Feb 18, 2017

Try this

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

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

Related questions

How to load JSON data into Bootstrap table?

There is way using javascript (http://jsfiddle.net/8svjf80g/1/) to load JSON data into Bootstrap table but same example is not working with me. Here is the code - Can you guys please help identify what part I am …

Read More
Scrollbar on bootstrap table

I have table that renders inside a panel which is inside a modal. As the table is relatively large, I'd like to restrict it's rows to say 5 so that the modal does not become scrollable. I looked through SO and …

Read More
Getting values of selected table rows in bootstrap using jquery

I'm using bootstrap table. In that I want to get Item ID value/values of selected table rows after clicking 'Add to cart' button present on same page. Table code: <table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/…

Read More