Javascript 使用模式弹出窗口中的用户信息更新表

我正试图用从模式弹出窗口输入的名称更新一行，用户在其中输入名称、电子邮件和电话号码。我在按钮Submit上附加了一个eventListener，它有一个updateTable函数，我很难理解。我看到is使用querySelectorAll按表行获取数据，并使用“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);
  })
})

var cells=document.querySelectorAll（'.table row'）；
单元格。forEach（（e，索引）=>{
e、 addEventListener（“单击”，（）=>{
//显示模态
$（'.modal'）.modal（“show”）；
//更新网格
//这是行号
日志（“行号：”，索引）
函数更新表（e）{
让姓名、电子邮件、电话号码、表格行、行；
name=document.getElementById（“name”）.value；
//email=document.getElementById（“email”）.value；
//phonenumber=document.getElementById（“phonenumber”）.value；
控制台日志（姓名、电子邮件、电话号码）；
tableRow=document.getElementsByClassName（“表行”）；
//得到你想要的那一排
行=document.queryselectoral（“.table行”）[索引]；
$（行）.find（“td”）.each（函数（索引，单元格）{
console.log（单元格、索引）
cell.innerText=名称；
});
$（'.modal'）.modal（“隐藏”）；
}
document.getElementById（“提交btn”）.addEventListener（“单击”，可更新）；
})
})

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

<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>

预订

我已经更新了代码。您可以选择该行的td，从而检查在该行中单击了哪个特定td，而不是选择整个表行

另外，您已经在for循环中定义了updatetable方法

var cells=document.querySelectorAll（'.table row>td'）；
var cellIndex=-1；
单元格。forEach（（e，索引）=>{
e、 addEventListener（“单击”，（）=>{
//显示模态
$（'.modal'）.modal（“show”）；
//更新网格
//这是行号
日志（“行号：”，索引）
单元索引=索引
})
})
函数更新表（e）{
让姓名、电子邮件、电话号码、表格行、行；
name=document.getElementById（“name”）.value；
控制台日志（姓名、电子邮件、电话号码）；
//得到你想要的那一排
行=单元格[单元格索引]；
$（行）.html（名称）；
$（'.modal'）.modal（“隐藏”）；
}
document.getElementById（“提交btn”）.addEventListener（“单击”，可更新）

预订
表单元格
表单元格
表单元格
表单元格
表单元格
表单元格
表单元格
表单元格
Hi，你能分享你的模态代码吗？@YashMaheshwari我添加了模态代码。