正在使用模态弹出窗口中的用户信息更新 Table

Question

我正在尝试仅使用从模态弹出窗口输入的名称更新一行，用户在其中输入姓名、电子邮件和 phone-number。我将一个 eventListener 附加到按钮提交，它有一个我很难理解的 updateTable 函数。我看到这是使用 querySelectorAll 按 table 行获取数据，并使用“td”循环遍历每个单元格并执行 cell.innerText = name。我怎样才能让这段代码只改变用户点击的单元格，现在整行，这是现在。

<script>
var cells = document.querySelectorAll('.table-row');
cells.forEach((e, index) => {
  e.addEventListener("click", () => {
    //show modal
    $('.modal').modal("show");
    //update grid
    // This is the row number
    console.log("Row number: ", index)

    function updateTable(e) {
      let name, email, phonenumber, tableRow, row;
      name = document.getElementById("name").value;
      //email = document.getElementById("email").value;
      //phonenumber = document.getElementById("phonenumber").value;
      console.log(name, email, phonenumber);
      tableRow = document.getElementsByClassName("table-row");
      // Get the row that you want
      row = document.querySelectorAll(".table-row")[index];

        
      $(row).find("td").each(function(index, cell) {
        console.log(cell, index)
        cell.innerText = name;

      });
      
      $('.modal').modal("hide");
    }
    document.getElementById("submit-btn").addEventListener("click", updateTable);
  })
})

我的逻辑是这样的，table实现如下：

<tr class="table-row">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
</table>

如有任何帮助，我们将不胜感激。

编辑：这是模态的代码。

<div class="row">
<div class="col-md-12">

  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1>Reservation</h1>
        </div>
        <div class="modal-body">

          <input type="text" name="field1" placeholder="Name" id="name">

          <input type="text" name="field2" placeholder="Email" id="email">

          <input type="text" name="field3" placeholder="PhoneNumber" id="phonenumber">

        </div>
        <div class="modal-footer">

          <input id="submit-btn" class="btn submit" value="Submit">
          <input class="btn btn-default" data-dismiss="modal" value="Close">

        </div>
      </div>
    </div>
  </div>

</div>

Answer 1

我更新了代码。您可以 select 该行的 td，而不是 selecting 整个 table 行，从而检查在该行中单击了哪个特定的 td。

此外，您已经在 for 循环中定义了更新 table 方法。

var cells = document.querySelectorAll('.table-row > td');
var cellIndex = -1;
cells.forEach((e, index) => {
  e.addEventListener("click", () => {
    //show modal
    $('.modal').modal("show");
    //update grid
    // This is the row number
    console.log("Row number: ", index)
    cellIndex = index
  })
})

function updateTable(e) {
  let name, email, phonenumber, tableRow, row;
  name = document.getElementById("name").value;
  console.log(name, email, phonenumber);
  // Get the row that you want
  row = cells[cellIndex];
  $(row).html(name);
  $('.modal').modal("hide");
}

document.getElementById("submit-btn").addEventListener("click", updateTable);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
<div class="col-md-12">

  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1>Reservation</h1>
        </div>
        <div class="modal-body">

          <input type="text" name="field1" placeholder="Name" id="name">

          <input type="text" name="field2" placeholder="Email" id="email">

          <input type="text" name="field3" placeholder="PhoneNumber" id="phonenumber">

        </div>
        <div class="modal-footer">

          <input id="submit-btn" class="btn submit" value="Submit">
          <input class="btn btn-default" data-dismiss="modal" value="Close">

        </div>
      </div>
    </div>
  </div>

</div>

<table>  
  <tr class="table-row">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
  </tr>
</table>

正在使用模态弹出窗口中的用户信息更新 Table

Updating Table With User Information from Modal Popup

html

javascript

bootstrap-modal