單擊下拉菜單時更新表單元格內容

Question

我有一個html表，並且使用javascript在其中一列中的所有td元素中添加了一個下拉菜單。 我想對其進行編碼，以便當用戶從下拉菜單中選擇和選項時，它會更新該行中另一個單元格的值。 下拉菜單可以正常工作，但是我很難弄清楚如何更新對應的CONFIRMATION單元格。

該表如下所示：

到目前為止，我提出的JS代碼如下所示：

$(document).ready(function(){
  var table = document.getElementById("req_table");
  var cells = table.getElementsByTagName('th');

  $(function(){
    $("tr").each(function(){
      //this is where I create/add the dropdown menu to the table//
      var dropdown_str = "<div class='dropdown'><button id='dLabel' type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Request Action<span class='caret'></span></button><ul aria-labelledby='drop4' class='dropdown-menu' id='menu1'><li class='Confirm'><a href='#'>Confirm</a></li><li class='Reject'><a href='#'>Reject</a></li></ul></div>";
      $(this).find("td:eq(2)").append(dropdown_str);
    });
  });
  //this is where I tried to update the CONFIRMATION cell//
  $('.Confirm').on('click',function(){
    $(this).find("td:eq(1)").text = "CONFIRM";
  });
});

html表是使用DataFrame.to_html()從熊貓數據DataFrame.to_html()創建的。

當用戶從下拉菜單中選擇一個選項時，誰能告訴我如何更新CONFIRMATION單元？

Answer 1

使用.parents("tr").first()查找父行，並使用.html()更新內容

$('body').on('click',".Confirm",function(){
    $(this).parents("tr").first().find("td:eq(1)").html("CONFIRM");
});

Answer 2

您使用$(this).find里面click事件，但this指的是li點擊那里。

因此，您應該獲取最接近的tr父級，以找到所需的td ：

$('.Confirm').on('click', function() {
  $(this).closest('tr').find("td:eq(1)").text("CONFIRM");
});

您使用text方法是因為它是一個屬性，但是它是一個函數，因此我也已對其進行了修復。