javascript - 单击 td 时转换为下拉框并将更改保存到数据库

Question

我有一个脚本，当单击 td(表数据)时会显示一个下拉框。它包含选项“X”和“O”。

我的 html 表包含我的数据库中的数据。我的客户想要对数据进行前端编辑，因为这对他们来说很容易。所以我将 td 转换为下拉列表，以便他们可以轻松发表评论。但是如何将用户在表中所做的更改保存到数据库。

这是我制作 td 下拉框的脚本:

$(document).on('click', 'td', function() { ////---make td transform to dropdown list box when click---///
  if($(this).find('select').length == 0) {
      $(this).empty();  //clears out current text in the table
      $(this).append('<select><option></option><option style="font-size:20px;">X <option style="font-size:20px;">O</select>');
  }
});

Answer 1

将名称和类别添加到您的选择框

$(document).on('click', 'td', function() { 
if($(this).find('select').length == 0) 
  {
    $(this).empty();  //clears out current text in the table
    $(this).append('<select class="selectbox" name="selectbox"><option></option><option 
style="font-size:20px;" value="X">X <option value="0" style="font-size:20px;">O</select>');
  }
});

并创建一个 jquery 更改事件，尝试这样的事情

 $(document).on('change', '.selectbox', function() { 
    $.ajax({
      type: 'POST',
      crossDomain: true,   
      data: {
        data_value: this.value,
      },   
      url: 'your_url_to_update_to_db.php',
      success: function (data) 
      { 
          //do Something
        },
      });
  });