Updating Table With User Information from Modal Popup

I am trying to update a row with just the name entered from a modal popup, where the user enters name, email, and phone-number. I attached an eventListener to the button Submit, that has a updateTable function that I am having a hard time understanding. I see that is grabs the data by table row with querySelectorAll, and loops through each cell with a “td” and does cell.innerText = name. How can I get this code to only change the cell clicked on by the user and now the whole row, which is does right now.

<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);
  })
})

This is my logic so fare, the table is implemented as follows:

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

Any help would be appreciated.

EDIT: Here is the code for the modal.

<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

I have updated the code. Instead of selecting the whole table row, you can select the td’s of the row and so to check which specific td is clicked in the row.

Also, you have defined the update table method in the for loop.

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>

Advertisement

Answer