色を変更するとき焦点を当てている内に入力

Question

と仮定私は、PHPのループ内<tr>と<td>と、このようなテーブルがあります。

table tr.active{ 
    background:red; 
} 

：私はCSSを使用しました

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

をそして、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

私は、これはあなたが探しているものだと思う。私はその後、入力から、私はに最も近い親trをターゲットにしています、フォーカス/ぼかしを探すためにテーブルからinputをターゲットにしています

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

ハイライト

JSFiddle

あなたはその代わりにtd代わりに、単にターゲットを強調表示したい場合：

JSFiddle

Answer 2

あなたは集中していると言いますが、なぜkeydown/keyupを使用するのか理解できません。キーボードイベントに使用されます。 read here

試してみてください。

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

}) 

あなたはTDではないが、TRに、それは意志バブルアップし、行全体の色を変えているので、これはクリーンであるTR上のクリックイベントを割り当てます。

Answer 3

あなたは、その親<tr>をターゲットにフォーカスし、テキストボックスのイベントfocusoutを使用して追加することができます必要に応じてアクティブクラスを削除します。

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

Answer 4

focusin/focusoutイベントがバブル（ぼかしとは異なります）しているので、実際に入力ではなく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>