テーブルセルを選択項目の編集可能なフィールドに更新するにはどうすればよいですか？

Question

私はテーブルを持っていますが、テーブルセルをいくつか選択して、値を変更することができます。

これまでのところ動作しますが、<td> -cellをクリックすると、テキストの値が自分の選択に変わります。しかし、私が新しい値を選ぶために選択をクリックしようとすると、私のオプションリストはちょっとだけ表示されます。

私の選択をクリックすると、関数が再び実行され、td-cellの値が自分の選択に変更されるため、変更できません。ここで

jQuery(".editTable.tdInactive").on("click", function(event) { 
 
    event.preventDefault(); 
 
    console.log("WOAS?"); 
 
    var $ = jQuery; 
 
    var this_object = $(this); 
 

 
    this_object.removeClass('tdInactive'); 
 
    this_object.addClass('tdActive'); 
 

 
    var current_content = $(this).html(); 
 

 
    var new_content = $(this).attr('data-select'); 
 

 
    this_object.empty(); 
 
    this_object.append(new_content); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td data-select="MY SELECTION CODE" class="editTable tdInactive">VALUE AS TEXT TO CHANGE</td> 
 
    </tr> 
 
</table>

Answer 1

$(".editTable.tdInactive").on("click", function(event){ 
 
event.preventDefault(); 
 
alert("WOAS?"); 
 

 
var this_object = $(this); 
 

 
this_object.removeClass('tdInactive'); 
 
this_object.addClass('tdActive'); 
 

 
var current_content = $(this).html(); 
 

 
var new_content = $(this).data('select'); 
 

 

 
this_object.empty(); 
 
this_object.html(new_content); 
 

 
});

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

 

 
<table> 
 
<tr> 
 
<td data-select="MY SELECTION CODE" class="editTable tdInactive">VALUE AS TEXT TO CHANGE</td> 
 
</tr> 
 
</table> 
 

 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 
</style>

あなたは、このようなデータ値を取る必要があるgo.You：

は、ここに私のコードです。