0

テーブル行の入力のみを選択する方法は? クリックされた各行のすべての入力を意味します。

HTML:

<table>
<tr>
    <th><input type="text" name="num" value="num"/></th>   
    <th><input type="text" name="a" value="a"/></th>
</tr>

<tr>
    <td> <input type="text" name="num" value=""/> </td>
    <td><input type="text" name="a" value=""/></td>
</tr>
</table>​

CSS:

.highlight { background-color: blue; }

Jクエリ:

$(function(){
    $("tr input").click(function(){     
        $("tr input").toggleClass("highlight").siblings().removeClass("highlight"); 
    })      
})
  • 私はこれをテストするためにここに持っています: http://jsfiddle.net/yg4n6/
  • 私が探している効果の例をここに示します。これはうまく機能しますが、これは単なるテーブルです。テーブル内の入力で同じことをしようとしています: http://jsfiddle.net/yg4n6/5/
4

1 に答える 1

1

最初にthis親を見つけ、.highlight を検索して既存のものを削除します。-> TR -> 入力
に .highlight を適用するよりもthis

http://jsfiddle.net/yg4n6/2/

$("tr input").click(function(){      
     $(this).closest('table').find('.highlight').removeClass("highlight");
     $(this).closest('tr').find('input').toggleClass("highlight");
});

次のこともできます。

$("tr").click(function( e ){          
    if(e.target.tagName=='INPUT'){
       var $this = $(e.target);
       $this.closest('table').find('.highlight').removeClass("highlight");
       $this.closest('tr').find('input').toggleClass("highlight");
    }
});
于 2012-12-29T10:43:40.797 に答える