Adding background color to input boxes with jquery currently only TD is highlighting

Question

I have TD rows in my table highlighing, but I need the background of my input boxes to highlight as well. Shouldn't I be able to "chain" the input into the existing function?

Here is my fiddle:

http://jsfiddle.net/bthorn/d3L0djb6/

Jquery

$(function () {
//console.log('t');
$('[id*=dgKey] td').mouseover(function () {
    $(this).siblings().css('background-color', '#EAD575');
    var ind = $(this).index();
    $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('[id*=dgKey] td').mouseleave(function () {
    $(this).siblings().css('background-color', '');
    var ind = $(this).index();
    $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});

});

HTML

<table id="dgKeyWhatever">
<tr>
    <td align="center" style="font-size:Large;">D</td>
    <td align="left" style="font-size:Large;width:150px;">&nbsp;Sharp, John</td>
    <td>
        <input name="dgKey$ctl02$TotalOT" type="text" value="219.0" size="6" readonly="readonly" id="dgKey_TotalOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
        <input name="dgKey$ctl02$PendingOT" type="text" value="12.0" size="6" id="dgKey_PendingOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
        <input name="dgKey$ctl02$ScheduledOT" type="text" value="183.0" size="6" id="dgKey_ScheduledOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
        <input name="dgKey$ctl02$TurnedDownOT" type="text" value="24.0" size="6" id="dgKey_TurnedDownOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
        <input name="dgKey$ctl02$FudgeFactor" type="text" value="0.0" size="6" id="dgKey_FudgeFactor_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
        <input name="dgKey$ctl02$HomeNum" type="text" value="623-561-8099" size="12" id="dgKey_HomeNum_0" style="font-size:18pt;text-align:center" />
    </td>
    <td>
        <input name="dgKey$ctl02$CellNum" type="text" value="602-619-2933" size="12" id="dgKey_CellNum_0" style="font-size:18pt;text-align:center" />
    </td>
    <td align="left" style="font-size:Large;">&nbsp;JLSHARP</td>
    <td align="left" style="font-size:Large;">&nbsp;SUPERVISOR</td>
</tr>

Why are you doing mouseover css using js?

Amit
– Amit

2015-10-06 22:26:18 +00:00
Commented Oct 6, 2015 at 22:26 — Amit
– Amit, Commented Oct 6, 2015 at 22:26
So don't. There are css selectors for that (:hover)

Amit
– Amit

2015-10-06 22:34:10 +00:00
Commented Oct 6, 2015 at 22:34 — Amit
– Amit, Commented Oct 6, 2015 at 22:34

Jeroen Noten · Accepted Answer · 2015-10-06 22:26:11Z

1

Add this CSS rule:

#dgKeyWhatever input {
    background: inherit;
    border-width: 0; // add this to make it more beautiful
}

This will make sure that your input elements inherit the background color from its parent element.

answered Oct 6, 2015 at 22:26

Jeroen Noten

3,6341 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wahwahwah · Accepted Answer · 2015-10-06 23:11:10Z

In addition to the accepted answers, you can simplify your jQuery code by toggling a class that contains the background color you've chosen:

$('tr').has('input[id^="dgKey"]').hover(function(){
    $(this).toggleClass('foo');
});

This event will only bind to tr elements that have child input elements with id codes beginning with dgKey. On the hover it event, it will toggle the class foo, (add if doesn't exist, remove if does.) You're css classes would then look like the following:

/*from the accepted answer */
tr:hover input[id^="dgKey"] {
    background: inherit;
    background-color: transparent;
}

/*the class containing the bg color to toggle */
.foo{
    background-color: #EAD575;
}

Example:

$('tr').has('input[id^="dgKey"]').hover(function(){
	$(this).toggleClass('foo');
});

tr:hover input[id^="dgKey"] {
    background-color: transparent;
}
.foo{
    background-color: #EAD575;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dgKeyWhatever">
  <tr>
    <td align="center" style="font-size:Large;">D</td>
    <td align="left" style="font-size:Large;width:150px;">&nbsp;Sharp, John</td>
    <td>
      <input name="dgKey$ctl02$TotalOT" type="text" value="219.0" size="6" readonly="readonly" id="dgKey_TotalOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
      <input name="dgKey$ctl02$PendingOT" type="text" value="12.0" size="6" id="dgKey_PendingOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
      <input name="dgKey$ctl02$ScheduledOT" type="text" value="183.0" size="6" id="dgKey_ScheduledOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
      <input name="dgKey$ctl02$TurnedDownOT" type="text" value="24.0" size="6" id="dgKey_TurnedDownOT_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
      <input name="dgKey$ctl02$FudgeFactor" type="text" value="0.0" size="6" id="dgKey_FudgeFactor_0" style="font-size:18pt;text-align:right" />
    </td>
    <td>
      <input name="dgKey$ctl02$HomeNum" type="text" value="623-561-8099" size="12" id="dgKey_HomeNum_0" style="font-size:18pt;text-align:center" />
    </td>
    <td>
      <input name="dgKey$ctl02$CellNum" type="text" value="602-619-2933" size="12" id="dgKey_CellNum_0" style="font-size:18pt;text-align:center" />
    </td>
    <td align="left" style="font-size:Large;">&nbsp;JLSHARP</td>
    <td align="left" style="font-size:Large;">&nbsp;SUPERVISOR</td>
  </tr>
</table>

Collectives™ on Stack Overflow

Adding background color to input boxes with jquery currently only TD is highlighting

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related