CODEWITHSUNDEEP
jqueryasp.netcss
Arif YILMAZ
Arif YILMAZ

Reputation: 5866

jquery remove selected table's row's background color

How do you remove the background color of a selected row, with the help of jquery?

lets assume user selects the row with the id=3, I need to remove the background color.

<table class='css_table' style='width: 100%'>
<tr>
    <th style='width: 20%'>Kimden</th>
    <th style='width: 25%'>Konu</th>
    <th style='width: 25%'>Mesaj</th>
    <th style='width: 10%'>Okundu</th>
    <th style='width: 20%'>Tarih</th>
</tr>
<tr id='3' class='selected_row' style='cursor: pointer; background-color: #E0EEEE'>
    <td><span class='row_name'>Prof. Dr.altay tinar</span></td>
    <td><span class='row_subject'>asda da dasd asdasda</span></td>
    <td><span class='row_body'>asda da dasd asdasda</span></td>
    <td><span>0</span></td>
    <td><span class='row_time'>4/15/2013 3:40:40 AM</span></td>
</tr>
<tr id='5' class='selected_row' style='cursor: pointer;'>
    <td><span class='row_name'>Ped.Arifx Yilmazx</span></td>
    <td><span class='row_subject'>undefined asd asdsa </span></td>
    <td><span class='row_body'>qdqw dqw d asda sd </span></td>
    <td><span>1</span></td>
    <td><span class='row_time'>4/15/2013 3:42:36 AM</span></td>
</tr>

Upvotes: 0

Views: 3868

Answers (5)

Nemo
Nemo

Reputation: 320

try this

#HTML

<table class="css_table" border="1px">
<tr class='css-row'>
    <th style='width: 20%'>Kimden</th>
    <th style='width: 25%'>Konu</th>
    <th style='width: 25%'>Mesaj</th>
    <th style='width: 10%'>Okundu</th>
    <th style='width: 20%'>Tarih</th>
</tr>
<tr id='3' class='css-row'>
    <td><span>Prof. Dr.altay tinar</span></td>
    <td><span>asda da dasd asdasda</span></td>
    <td><span>asda da dasd asdasda</span></td>
    <td><span>0</span></td>
    <td><span class='row_time'>4/15/2013 3:40:40 AM</span></td>
</tr>
<tr id='5' class='css-row' >
    <td><span class='row_name'>Ped.Arifx Yilmazx</span></td>
    <td><span class='row_subject'>undefined asd asdsa </span></td>
    <td><span class='row_body'>qdqw dqw d asda sd </span></td>
    <td><span>1</span></td>
    <td><span class='row_time'>4/15/2013 3:42:36 AM</span></td>
</tr>
<table>

#CSS Style

.css-table
{
   width:100%;
}
.css-row
{
    cursor: pointer; 
    background-color: #E0EEEE;
    font-weight:normal;
}
.css-selectedrow
{
    color:blue;
    cursor: pointer;
    font-weight:normal;
    background-color: #fff;
}

#Script

$(document).ready(function(){
    $("tr").click(function(){
      $("table tr").addClass("css-row");
      $(this).removeClass("css-row");
  });
});

Upvotes: 1

M.Nabavi
M.Nabavi

Reputation: 79

You Can Try This Code

  $(document).ready(function () {
     $(".selected_row").css("background-color", "");
   });

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

Try this to be more specific:

$(".css_table tr[id='3']").css("background-color", "");

DEMO HERE

Upvotes: 0

Pandian
Pandian

Reputation: 9126

try like below, It will help you...

The below function removes the Background of table row on which the user clicks..

Fiddle : http://jsfiddle.net/RYh7U/139/

JQuery :

$(".css_table tr").click(function(){
    $(this).css("background", "");
});

Upvotes: 0

Matt Zeunert
Matt Zeunert

Reputation: 16561

Use jQuery's css function to remove the background color value:

var selectedId = 3;
$("#" + selectedId).css("background-color", "");

Upvotes: 3

Related Questions