单击下拉菜单时更新表格单元格内容答案

【问题标题】：Update table cell content when dropdown menu is clicked单击下拉菜单时更新表格单元格内容
【发布时间】：2015-09-23 04:32:21
【问题描述】：

我有一个 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() 从 pandas 数据框创建的。

谁能告诉我当用户从下拉菜单中选择其中一个选项时如何更新CONFIRMATION 单元格？

【问题讨论】：

为我们粘贴生成的 HTML 代码。

标签： javascript html

【解决方案1】：

使用.parents("tr").first() 查找父行并使用.html() 更新内容

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

【讨论】：

【解决方案2】：

您在click 事件中使用$(this).find，但this 指的是在此处单击的li。

因此，您应该找到最近的tr 父级以找到您想要的td：

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

您使用的是 text 方法，因为它是一个属性，但它是一个函数，所以我也修复了它。

【讨论】：