jQuery ボタン画像の切り替え

Question

###前提
以下のjqueryのコードを書きました。
「編集」ボタンを押すと「保存 キャンセル」のボタンが表示される。
「保存 キャンセル」ボタンを押すと「編集」ボタンが表示される。

###実現したいこと
現在のコードだと、一つ目のボタンを押すと他の全てのボタンが切り替わってしまいます。
一つ目を押したら一つ目のボタンだけ切り替わるようにしたいです。
どうぞよろしくお願いします。

###該当のソースコード

$(function(){
    $(".edit_on").click(function(){
        $(this).css({display:"none"});
        $('.edit_off').css({display:"block"});
    });
    
    $('.edit_off').click(function(){
        $(".edit_off").css({display:"none"});
        $('.edit_on').css({display:"block"});
    });
});

  <table>
			<tbody class="table_right">
					<tr>
							<th scope="row">氏名</th>
                        <td input type="text" name="Name"  value="田中 太郎" >田中 太郎<a href="#">
                        <img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on">
                        <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off">
                        <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></a></td>
					</tr>
					<tr>
							<th scope="row">フリガナ</th>
                        <td input type="text" name="Name"  value="タナカ タロウ">タナカ タロウ<a href=""><img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on">
                            <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off">
                            <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></a></td>
                    </tr>
					<tr>
							<th scope="row">メールアドレス</th>
                        <td input type="text" name="email"  value="[e-mail]">[e-mail]<a href=""><img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on">
                            <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off">
                            <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></a></td>
                    </tr>
			</tbody>
	    </table>

Answer 1

aタグでボタンを挟まなくてはいけないのでしょうか？
押すとリンクに飛んでしまうので設定が戻っちゃう気がしますが・・・
とりあえずこんな感じで

$(function(){
    $('.edit_off').each(function(){
        $(this).css({display:"none"});
    });
    $(".edit_on").click(function(){
        $(this).css({display:"none"});
        $(this).siblings('.edit_off').css({display:"inline"});
    });

    $('.edit_off').click(function(){
        $(this).css({display:"none"});
        $(this).siblings('.edit_off').css({display:"none"});
        $(this).siblings('.edit_on').css({display:"inline"});
    });
});

<table>
<tbody class="table_right">
<tr>
<th scope="row">氏名</th>
<td input type="text" name="Name"  value="田中 太郎" >田中 太郎
<img src="btn_edit.png" alt="編集" class="edit edit_on">
<img src="btn_save.png" alt="保存" class="save edit_off">
<img src="btn_cancel.png" alt="キャンセル" class="cancel edit_off"></td>
</tr>
<tr>
<th scope="row">フリガナ</th>
<td input type="text" name="Name"  value="タナカ タロウ">タナカ タロウ
<img src="btn_edit.png" alt="編集" class="edit edit_on">
<img src="btn_save.png" alt="保存" class="save edit_off">
<img src="btn_cancel.png" alt="キャンセル" class="cancel edit_off"></td>
</tr>
<tr>
<th scope="row">メールアドレス</th>
<td input type="text" name="email"  value="[e-mail]">[e-mail]
<img src="btn_edit.png" alt="編集" class="edit edit_on">
<img src="btn_save.png" alt="保存" class="save edit_off">
<img src="btn_cancel.png" alt="キャンセル" class="cancel edit_off"></td>
</tr>
</tbody>
</table>

Comments

[may88seiji]

each siblingsの使い方、大変参考になりました。
ありがとうございます！

Answer 2

 <td input type="text" name="Name"  value="田中 太郎" >

は

 <td><input type="text" name="Name"  value="田中 太郎" >

あとa要素で括る必要が無いと思います。

<a href="#">

---

回答：

.edit_off,
.do_edit .edit_on  { display: none; }
.edit_on,
.do_edit .edit_off { display: block; }

$(function(){
    $(".edit_on").click(function(){
        $(this).closest( 'td' ).addClass( 'do_edit' );
    });

    $('.edit_off').click(function(){
        $(this).closest( 'td' ).removeClass( 'do_edit' );
    });
});

Comments

[may88seiji]

closest　の使い方勉強になりました。
addClass removeClassでのやり方、ありがとうございます^ ^