将输入从模态保存到三个不同表之一

Question

我在一个 div 中有 3 个表，我想使其可编辑。在每个表格的底部都有一个“添加”按钮，用于打开一个模式（它们都打开相同的模式）。我有以下 JS 来添加新行：

如何让 JS 知道要将行添加到三个表中的哪一个？我拥有的三个表是 acc_table1、acc_table2、acc_table3。我试过“var table = document.getElementById("acc_table"+no);"没有用。

  if (tit.innerHTML === "Add Account"){
          var table = document.getElementById("acc_table1");
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
  cell1.innerHTML = document.getElementById("modal_type").value;
  cell2.innerHTML = document.getElementById("modal_price").value;
}

Answer 1

您可以通过考虑单击按钮的上下文来做到这一点。我们可以使用Node.previousElementSibling() 或Element.closest() 来搜索相关的表（取决于你的DOM 的结构），在其中插入新行。在这种情况下，您不需要将参数/参数传递给回调，这将要求您跟踪新的 ID 等。

如果您的<button> 元素紧跟在<table> 元素之后，那么您可以在按钮元素上触发点击事件时使用e.target.previousElementSibling 选择感兴趣的<table> 元素：

document.querySelectorAll('.addAccount').forEach(function(el) {
  el.addEventListener('click', function(e) {
    // Table element is immediately before button
    var table = e.target.previousElementSibling;
    
    // Perform sanity check before proceeding
    if (!table || !table.matches('table'))
      return;
    
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("modal_type").value;
    cell2.innerHTML = document.getElementById("modal_price").value;
  });
});

<input type="text" id="modal_type" value="MODAL_TYPE" />
<input type="text" id="modal_price" value="MODAL_PRICE" />

<h1>Table 1</h1>
<table>
  <tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>

<h1>Table 2</h1>
<table>
  <tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>

<h1>Table 3</h1>
<table>
  <tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>

或者，如果您的 <button> 元素被包裹在同一个父元素中（例如 <div> 元素），那么您可以使用 Element.closest() 和 Element.querySelector() 的组合在同一个父元素中查找表.同样，不需要 ID，一切都基于 DOM 层次结构中的上下文信息：

document.querySelectorAll('.addAccount').forEach(function(el) {
  el.addEventListener('click', function(e) {
    // Table element is immediately before button
    var table = e.target.closest('.wrapper').querySelector('table');

    // Perform sanity check before proceeding
    if (!table)
      return;

    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("modal_type").value;
    cell2.innerHTML = document.getElementById("modal_price").value;
  });
});

<input type="text" id="modal_type" value="MODAL_TYPE" />
<input type="text" id="modal_price" value="MODAL_PRICE" />

<hr />

<div class="wrapper">
  <button type="button" class="addAccount">Add account</button>
  <p>Random text here</p>
  <h1>Table 1</h1>
  <table>
    <tbody></tbody>
  </table>

</div>

<div class="wrapper">
  <h1>Table 2</h1>
  <table>
    <tbody></tbody>
  </table>
  <p>Random text here</p>
  <button type="button" class="addAccount">Add account</button>
</div>

Answer 2

您可以使用变量来存储所需的表 ID，以便在要将数据保存到表时使用它。

类似下面的例子

var tableId = "";
function openModalFunction(selectedTableId){
  tableId = selectedTableId;
}
 
 
function saveDataToTable(){
  var table = document.getElementById(tableId);
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "cell 1";
  cell2.innerHTML = "cell 2";
 }

<table id="acc_table1">
<thead><tr><th colspan=2>Table 1</th></tr></thead>
<tfoot>
<tr>
<th colspan=2>
<button onclick="openModalFunction('acc_table1')">table one</button>
</th>
</tr>
</tfoot>
</table>
<hr>
<table id="acc_table2">
<thead><tr><th colspan=2>Table 1</th></tr></thead>
<tfoot>
<tr>
<th colspan=2>
<button onclick="openModalFunction('acc_table2')">table two</button>
</th>
</tr>
</tfoot>
</table>

<hr>

<button onclick="saveDataToTable()">Save</button>