Question

我有一个表，我想要一些表格单元格更改为选择，用户可以在其中更改值。

到目前为止它可行，但如果我点击<td> - 单元格，文本值将更改为我的选择。但是，当我尝试单击选择以选择新值时，我的选项列表只显示一秒钟。

我想，如果我点击我的选择，该功能会再次运行，并将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>

你去。你需要像这样获取数据。

如何将表格单元更新为选择中的可编辑字段？

1 个答案: