Override bootstrap-table selected row background color
<p>I'm using jQuery bootstrap-table plugin and I need to change the color of the selected row and restore the original color when I click the next row. This fiddle <a href="http://jsfiddle.net/haideraliarain/e3nk137y/789/" rel="nofollow">http://jsfiddle.net/haideraliarain/e3nk137y/789/</a> explains how to do this. However, I would like to have the color highlight of my choice instead of the default green. I have tried this using the code below which changes the color but problem is that the color of the selected row changes on next click and not immediately. Here is my fiddle <a href="https://jsfiddle.net/amotha/1yvr1kun/2/" rel="nofollow">https://jsfiddle.net/amotha/1yvr1kun/2/</a>
How can I make the change happen on the current click?</p>

<p>html:</p>

<pre><code>&lt;table id="table" data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
       data-click-to-select="true"
       data-single-select="true"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-field="state" data-checkbox="true" data-visible="false"&gt;&lt;/th&gt;
        &lt;th data-field="name"&gt;Name&lt;/th&gt;
        &lt;th data-field="stargazers_count"&gt;Stars&lt;/th&gt;
        &lt;th data-field="forks_count"&gt;Forks&lt;/th&gt;
        &lt;th data-field="description"&gt;Description&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
&lt;/table&gt;
</code></pre>

<p>js:</p>

<pre><code>    $('#table').on('click-row.bs.table', function (e, row, $element) {
        $('.success').removeClass('success');
        $('.success').css("background-color","#fff");
        $($element).addClass('success');
        $('.success').css("background-color","#00FFFF");
});
</code></pre>