Question

假设我在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> 输入字段（或被聚焦）时，<tr>的颜色将会改变。根据上面的jquery它可以工作但不是预期的，因为每次我选择输入字段时它变成红色，然后当选择下一个时它返回默认表格颜色，依此类推。

Answer 1

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

尝试：

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

})

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

Answer 2

我认为这就是你要找的东西：

$(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

Answer 3

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

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

Answer 4

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

＆＃13;

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

＆＃13;

table tr.active{
    background:red;
}

＆＃13;

<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>

＆＃13;

当焦点内的输入时更改表格行的颜色

4 个答案: