Question

我的桌子中有TD行高亮，但我需要输入框的背景以突出显示。我不应该能够＆＃34;链＆＃34;输入现有函数？

这是我的小提琴：

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
}

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

Answer 2

为了让它与Chrome和Firefox一起在 IE 中使用

#dgKeyWhatever input {
    background: inherit;
    background-color:transparent;
}

Answer 3

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

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

此事件仅会绑定到tr个元素，这些元素的子input元素的ID代码以dgKey开头。在悬停它事件时，它将切换类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"]').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>

使用jquery将背景颜色添加到输入框当前只有TD突出显示

3 个答案: