CODEWITHSUNDEEP
jqueryhtml
Max Segal
Max Segal

Reputation: 2045

Change table row color when radio button in td is clicked

Ok guys, I have something really challenging for you today.

I have a table which has two cells. In the second cell of every row, I have a radio button. I want to be able to change the color of the row whenever the radio button is clicked.

To do that I pass the argument this to the function that will do the work. I expect this to be the radio button that was clicked. Then I find the tr of that button and change its color with $changed_tr.css("bgcolor", "72ff76"); but that doesn't work. What am I missing out here?

function save(avail_id, map_id, radio) {
    //some api call...
    // change background color
    var $changed_tr = $(radio).closest('td').closest('tr');
    $changed_tr.css("bgcolor", "72ff76");        
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="header-text">
    <p>
    <table border=1>
        <tr>
            <td>yyy
            </td>
            <td>
                <label>
                <input type="radio" name="target_105146" value="-11"
                    onclick="save(105146,-11,this);">
                </label>Discontinued
                <label>
                <input type="radio" name="target_105146" value="-8"
                    onclick="save(105146,-8,this);">
                </label>Future product
                <label>
                <input type="radio" name="target_105146" value="-6"
                    onclick="save(105146,-6,this);">
                </label>In store only
                <label>
                <input type="radio" name="target_105146" value="-5"
                    onclick="save(105146,-5,this);">
                </label>In Stock
                <label>
                <input type="radio" name="target_105146" value="-4"
                    checked
                    onclick="save(105146,-4,this);">
                </label>Delayed delivery
                <label>
                <input type="radio" name="target_105146" value="-2"
                    onclick="save(105146,-2,this);">
                </label>Out of stock
                <label>
                <input type="radio" name="target_105146" value="-1"
                    onclick="save(105146,-1,this);">
                </label>Unknown
            </td>
        </tr>
        <tr
            >
            <td>
                xxx
            </td>
            <td>
                <label>
                <input type="radio" name="target_105521" value="-11"
                    onclick="save(105521,-11,this);">
                </label>Discontinued
                <label>
                <input type="radio" name="target_105521" value="-8"
                    onclick="save(105521,-8,this);">
                </label>Future product
                <label>
                <input type="radio" name="target_105521" value="-6"
                    checked
                    onclick="save(105521,-6,this);">
                </label>In store only
                <label>
                <input type="radio" name="target_105521" value="-5"
                    onclick="save(105521,-5,this);">
                </label>In Stock
                <label>
                <input type="radio" name="target_105521" value="-4"
                    onclick="save(105521,-4,this);">
                </label>Delayed delivery
                <label>
                <input type="radio" name="target_105521" value="-2"
                    onclick="save(105521,-2,this);">
                </label>Out of stock
                <label>
                <input type="radio" name="target_105521" value="-1"
                    onclick="save(105521,-1,this);">
                </label>Unknown
            </td>
        </tr>
    </table>
    </p>
</div>
<p>
</p>
<script>
    function save(avail_id, map_id, radio) {
      //some api call...
        // change background color
         var $changed_tr = $(radio).closest('td').closest('tr');
        $changed_tr.css("bgcolor", "72ff76");

    }
</script>

Upvotes: 0

Views: 995

Answers (3)

Subesh Bhandari
Subesh Bhandari

Reputation: 1112

function save(avail_id, map_id, radio) {
       //some api call...
       // change background color
       var $changed_tr = $(radio).parents('tr'); // tr is ancestor 
       $changed_tr.css("background", "red"); 
 }

Change the code to this. Use 'background' attribute and color is not in correct format.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue with your code is because the CSS property name is background-color, not bgcolor. The hex colour value should also have a # prefix, like this:

$changed_tr.css("background-color", "#72ff76");

Also note that your HTML is invalid as p element cannot contain a table. You can also place the text within the label element to expand the hit area for the checkboxes. I'd also suggest you amend your code to use unobtrusive event handlers instead of the outdated onclick event attributes, something like this:

$('table input').change(function() {
  //some api call...
  
  var $changed_tr = $(this).closest('tr');
  $changed_tr.css("background-color", "#72ff76");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>yyy
    </td>
    <td>
      <label>
        <input type="radio" name="target_105146" value="-11" data-availid="105146" />
        Discontinued
      </label>

      <label>
        <input type="radio" name="target_105146" value="-8" data-availid="105146" />
        Future product
      </label>

      <label>
        <input type="radio" name="target_105146" value="-6" data-availid="105146" />
        In store only
      </label>

      <label>
        <input type="radio" name="target_105146" value="-5" data-availid="105146" />
        In Stock
      </label>

      <label>
        <input type="radio" name="target_105146" value="-4" checked data-availid="105146" />
        Delayed delivery
      </label>

      <label>
       <input type="radio" name="target_105146" value="-2" data-availid="105146" />
        Out of stock
      </label>

      <label>
       <input type="radio" name="target_105146" value="-1" data-availid="105146" />
        Unknown
      </label>
    </td>
  </tr>
  <tr>
    <td>xxx</td>
    <td>
      <label>
        <input type="radio" name="target_105521" value="-11" data-availid="105521" />
        Discontinued
      </label>

      <label>
        <input type="radio" name="target_105521" value="-8" data-availid="105521" />
        Future product
      </label>

      <label>
        <input type="radio" name="target_105521" value="-6" checked data-availid="105521">
        In store only
      </label>

      <label>
        <input type="radio" name="target_105521" value="-5" data-availid="105521" />
       In Stock
      </label>

      <label>
        <input type="radio" name="target_105521" value="-4" data-availid="105521" />
        Delayed delivery
      </label>

      <label>
        <input type="radio" name="target_105521" value="-2" data-availid="105521" />
      </label>
      Out of stock

      <label>
        <input type="radio" name="target_105521" value="-1" data-availid="105521" />
        Unknown
      </label>
    </td>
  </tr>
</table>

Upvotes: 2

BornReady
BornReady

Reputation: 305

As mentioned, bgcolor is not a valid CSS property, but 'background-color' is. Hyphenated CSS properties are accessible through the camel-cased variant. This means that "background-color", becomes accessible as "backgroundColor".

TLDR: $changed_tr.css('backgroundColor', 'red')

Upvotes: 0

Related Questions