Javascript 使用jquery向输入框添加背景色当前只有TD高亮显示

我的表格中有TD行高亮显示，但我需要输入框的背景也高亮显示。 难道我不能将输入“链接”到现有函数中吗

这是我的小提琴：

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>

D
快点，约翰
JLSHARP
监督人

添加此CSS规则：

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

---

这将确保您的输入元素继承其父元素的背景色。

除了接受的答案外，您还可以通过切换包含所选背景色的类来简化jQuery代码：

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

此事件将仅绑定到具有子

input

元素且id代码以

dgKey

开头的

tr

元素。在hover-it事件中，它将切换类foo（如果不存在，则添加，如果存在，则删除）。您的css类将如下所示：

/*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;
}

例如：

$（'tr'）.has（'input[id^=“dgKey”]”）。悬停（函数（）{
$（this.toggleClass（'foo'）；
});
tr:hover输入[id^=“dgKey”]{
背景色：透明；
}
傅先生{
背景色：#EAD575；
}

D
快点，约翰
JLSHARP
监督人
为什么要使用js在css上进行鼠标移动？所以不要这样做。有css选择器（
：hover
）