javascript - 用jquery给输入框添加背景色目前只有TD在高亮

Question

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

这是我的 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>

Answer 1

添加这条 CSS 规则:

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

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