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

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

当用户从下拉菜单中选择其中一个选项时，有人可以告诉我如何更新CONFIRMATION单元格吗？

Answer 1

查找包含.parents("tr").first()的父行，并使用.html()

更新内容

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

Answer 2

您在Option Explicit Const dateCol = 1 Const invoiceNumCol = 2 Const amountCol = 3 Const paymentCol = 4 Private Sub SaveButton_Click() Dim row As Range Dim box As Control For Each row In ActiveSheet.Rows On Error GoTo ExitHandler row.Cells(1, paymentCol).value = Me.Controls(row.row & paymentCol).value Next row ExitHandler: Exit Sub End Sub Private Sub UserForm_Initialize() Dim row As Range For Each row In ActiveSheet.Rows If row.Cells(1, dateCol).value = "" Then Exit For End If Call AddBox(row, dateCol) Call AddBox(row, invoiceNumCol) Call AddBox(row, amountCol) Call AddBox(row, paymentCol) Next row End Sub Private Sub AddBox(row, colIndex) Dim box As Control Const width = 50 Const padWidth = width + 4 Const height = 15 Const padHeight = height + 4 Const topMargin = 25 Const leftMargin = 5 Set box = Me.Controls.Add("Forms.TextBox.1", row.row & colIndex) box.Left = (colIndex - 1) * padWidth + leftMargin box.height = height box.width = width box.Top = (row.row - 1) * padHeight + topMargin box.value = row.Cells(1, colIndex).value End Sub 事件中使用了$(this).find，但click指的是this点击了那里。

因此，您应该让最近的li家长找到您想要的tr：

td

你使用$('.Confirm').on('click', function() { $(this).closest('tr').find("td:eq(1)").text("CONFIRM"); }); 方法，因为它是一个属性，但它是一个函数，所以我也修复了它。