javascript - How to change background color of a row on checkbox selection

I have html table and also had some rows with checkbox. Onselction of checkbox i want to higlight that row with some background color.

<table>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
</table>

I have html table and also had some rows with checkbox. Onselction of checkbox i want to higlight that row with some background color.

<table>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
</table>

Share Improve this question edited Aug 5, 2015 at 9:45 Tushar 87.3k21 gold badges163 silver badges181 bronze badges asked Aug 5, 2015 at 9:44 user1463065 5953 gold badges15 silver badges32 bronze badges

The id attribute in HTML must be unique. – James Donnelly Commented Aug 5, 2015 at 9:46

Add a ment |

6 Answers 6

Sorted by: Reset to default 4

id should be unique
Don't use inline event handlers
Don't use inline styles, use CSS classes

$('input[name="chkOrgRow"]').on('change', function() {
  $(this).closest('tr').toggleClass('yellow', $(this).is(':checked'));
});

.yellow {
  background-color: yellow;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
</table>

$("[name='chkOrgRow']").change(function() {
  $(this).closest('tr').toggleClass('ColorChange');
});

.ColorChange{
  background-color: #CCFFCC;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
  <tr>
    <td>
      <input type='checkbox' name='chkOrgRow' />
    </td>
    <td>L</td>
    <td>3/14/2015</td>
    <td>78</td>
    <td>1412</td>
    <td>2</td>
    <td>1235</td>
    <td>A</td>
    <td>R</td>
    <td>3/14/2015 12:13:56 PM</td>
  </tr>
</table>

You need to create a function which will check the checkbox is checked and then change it's color if it was checked.

function selectOrgChildRec(checkBox){  
   if(checkBox.checked==true){
      checkbox.parentNode.background='red';
   }
}

If at all you are using inline function then you can just do it with one line with css class toggled as below:

function selectOrgChildRec(ctrl){
    $(ctrl).closest('tr').toggleClass('active');
}

DEMO

You have duplicate IDs for elements. IDs should be always unique. You can rather use same classname tham ID. I would also remend you to attach the event using jquery rather than inline events:

$('input[name="chkOrgRow"]').on('change', function() {
   $(this).closest('tr').css('background-color', $(this).is(':checked') ? 'yellow': '');
});

Demo

	$("input[type=checkbox]").on('change',function(){
     if($(this).prop('checked')) 
     {
         $(this).parent().parent().css('background-color', '#a52a2a');
     }
});

<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<table cellpadding="15em" cellspacing="5em" border="2px">
<tr>
	<td><input type="checkbox"></td>
    <td>abc</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
	<td><input type="checkbox"></td>
    <td>dbc</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
	<td><input type="checkbox"></td>
    <td>pqr</td>
    <td>3</td>
    <td>3</td>
</tr>
<tr>
	<td><input type="checkbox"></td>
    <td>lbc</td>
    <td>4</td>
    <td>4</td>
</tr>
</table>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change background color of a row on checkbox selection - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)