聚焦输入时更改表格行的颜色答案

【问题标题】：Change color of table row when an input within is focused聚焦输入时更改表格行的颜色
【发布时间】：2016-08-09 11:36:27
【问题描述】：

假设我在 PHP 循环中有一个这样的表格，其中包含 <tr> 和 <td>：

   //Some code...
   echo "<table id='rowClick'>";
   while($row=mysql_fetch_assoc($result){

    echo "<tr><td><input type='text' value='{$row['item']}'></td></tr>";
}
    echo "</table>";
//Rest of code

我使用了 CSS ：

table tr.active{
    background:red;
}

对于 JQuery：

<script>

$(document).ready(function(){
    $("#rowClick").children("tbody").children("tr").children("td").keydown(function(){
        $(this.parentNode).toggleClass("active");
    });
     $("#rowClick").children("tbody").children("tr").children("td").keyup(function(){
        $(this.parentNode).toggleClass("active");
    });
});
</script>

我对 JQuery 不是很熟悉。我想要的是，当用户在任何行中选择 <td> input field （或被聚焦）时，<tr> 的颜色将会改变。根据上面的jquery，它可以工作，但不如预期，因为每次我选择输入字段时它都会变成红色，然后在选择下一个字段时它会返回到默认表格颜色等等。

【问题讨论】：

我不确定您为什么使用 keydown/keyup。听起来您想使用focusin 和focusout。另外，不是toggleClass，也许你应该在focusin上做一个addClass，在focusout上做一个removeClass？
让我试试这个，我会告诉你结果！

标签： php jquery css colors

【解决方案1】：

我想这就是你要找的：

$(document).ready(function(){
    $("#rowClick").find("input").on("focus", function(){
      $(this).closest("tr").addClass("active");
    }).on("blur", function() {
      $(this).closest("tr").removeClass("active");
    })
});

我从表格中定位 input 以查找焦点/模糊，然后从输入中定位最接近的父 tr 以突出显示。

JSFiddle

如果您想突出显示 td，只需将其作为目标：

JSFiddle

【讨论】：

感谢您的回答，我已经尝试了您的代码，并且完全符合我的期望，但我意识到当移动到同一行内的下一个字段时，它会变回其默认颜色（我的意思是<td>Color Changed</td><td>Here color turns back to default </td>)。仅当向下移动同一列时颜色才会发生变化。
@AliHamra，我想你是说你现在想针对 TD 而不是 TR，请检查我在底部的编辑。（请注意，如果您使用tr.active，您还必须更改您的 CSS）
好的，我已经使用了您更新的答案，现在它可以通过单击每个 <td> 输入来工作，无论它放在哪里。非常感谢，只有一个问题，当使用键盘箭头键移动到另一个输入字段时，颜色是否也会改变？我现在已经尝试过了，似乎这也恢复了它的默认颜色。我的意思是假设使用向右或向左箭头..现在它只适用于上下键......我很抱歉
箭头键不会改变焦点...除非你有一些 js 为你做这件事？
哦，好吧，我虽然可以在 JQuery 中做到这一点。我仅将 JS 用于字段验证目的。

【解决方案2】：

你说当它集中但我不明白你为什么使用keydown/keyup？它们用于键盘事件。 read here

试试：

$("#rowClick tr input").on("focus", function(){
    $("#rowClick tr").removeClass("active");
    $(this).parents("tr").addClass("active")

})

您在 tr 上分配了 click 事件，它不在 td 上，但它会冒泡到 tr 并且因为您正在更改整行的颜色，所以这更干净。

【讨论】：

感谢您的回复，根据您的代码，它仅在我使用鼠标单击选择输入字段时才有效，我希望在字段始终聚焦时更改新颜色，无论是通过鼠标单击还是按键事件。
如果用户将焦点移动到页面上的另一个项目（表格之外），这不会删除活动类。你需要一个focusout或blur事件来做到这一点，我认为
问题中未包含该问题

【解决方案3】：

您可以使用文本框的 focus 和 focusout 事件来定位其父 <tr> 并根据需要添加和删除活动类：

$(function() {
     $('#rowClick input').on('focus', function() {
          $(this).closest('tr').addClass('active');
     }).on('focusout', function() {
          $(this).closest('tr').removeClass('active');
     });
});

【讨论】：

【解决方案4】：

由于 focusin/focusout 事件冒泡（与 blur 不同），您可以通过将侦听器实际附加到 tr 而不是输入来简化事情。这样做的好处是，如果您在同一行中的输入之间进行更改，它不会触发（因为不需要它......您仍然在同一行中）。像这样：

$(document).ready(function(){
    $("#rowClick tr").focusin(function(){
        $(this).addClass("active");
    }).focusout(function() {
        $(this).removeClass("active");
    });
});

table tr.active{
    background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id='rowClick'>
  <tr>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td><input type="text"/></td>
    <td><input type="text"/></td>
  </tr>
</table>

【讨论】：