Question 231874 in Html Question posted in
Some basic documentation can be found here.

Html – Update innerText in <td> after click button

I try various code already but it seems I cannot update the text inside my table

I try various way from looping tr and google everything but still not reflected on my table

I expecting in my #tableModel should be reflecting after I click the button Add but come back disappointed because nothing happen. I did my Google research and try everything almost 3 hour but found nothing.

rowM = 1;

function addAccessory() {


  let tableM = document.getElementById("tableModel");

  // Insert data to cells


  var accFrame = "cake"
  var accFoam = "to"
  var accLegBase = "eat"
  var Desc = "yumm"

  var trs = tableM.getElementsByTagName("tr")[rowM - 1];
  var tds = trs.getElementsByTagName("td");
  var tdFrame = trs.getElementsByTagName("td")[8];
  var tdFoam = trs.getElementsByTagName("td")[9];
  var tdLeg = trs.getElementsByTagName("td")[10];
  var tdDesc = trs.getElementsByTagName("td")[5];

  for (var i = 0; i <= tds.length; i++) {
    //tds[i].innerHTML = items[i].style.height;

    if (i == 8) {
      //frame
      tds[i].innerText = accFrame
    } else if (i == 9) {
      //foam
      tds[i].innerText = accFoam
    } else if (i == 10) {
      //Leg/Base
      tds[i].innerText = accLegBase
    } else if (i == 5) {
      tds[i].innerText = Desc
    }
  }



}
<table class="table table-bordered" id="tableModel">
  <thead>
    <tr>
      <th class="text-left" style="border: 1px solid gray;">No</th>
      <th class="text-left" style="border: 1px solid gray;">Action</th>
      <th class="text-left" style="border: 1px solid gray;">Product Category</th>
      <th class="text-left" style="border: 1px solid gray;">Model</th>
      <th class="text-left" style="border: 1px solid gray;">Code</th>
      <th class="text-left" style="border: 1px solid gray;">Description</th>
      <th class="text-left" style="border: 1px solid gray;">Color</th>
      <th class="text-left" style="border: 1px solid gray;">Accessory</th>
      <th class="text-left" style="border: 1px solid gray;">Frame</th>
      <th class="text-left" style="border: 1px solid gray;">Foam</th>
      <th class="text-left" style="border: 1px solid gray;">Leg/Base</th>
      <th class="text-left" style="border: 1px solid gray;">Total Unit Price</th>
      <th class="text-left" style="border: 1px solid gray;">Qty</th>
      <th class="text-left" style="border: 1px solid gray;">Subtotal</th>
      <th class="text-left" style="border: 1px solid gray;">Remark</th>

    </tr>
  </thead>

  <tbody>

    <tr>
      <td>1</td>
      <td>
        <button class="trashben btn btn-outline-primary" style="border-width: 2px;">
                                <i class="fas fa-pencil"></i>
                            </button>
        <button class="trashben btn btn-outline-danger" style="border-width: 2px;">
                              <i class="fas fa-trash-alt"></i>
                            </button>
        <button type="button" class="btn btn-outline-primary" id="partial-submit">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button" role="button" onclick="addAccessory()"><i class="fa-solid fa-pen-to-square"></i>Add</button></a>
      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>


  </tbody>
  </tr>

</table>
Tags:

2

Answers


  1. 0

    I think I would target each button and find its nearest row so that you have better control over which rows you are trying to update depending on your table’s content here’s a refactored version where I have moved the parts of your js operation into smaller, more test friendly functions.

    By targeting the nearest row to clicked button you should be able to control each of the rows individually.

    Hope this helps you out! Have a great day!

    function addAccessory(event) {
  let currentRow = getClickedRow(event);
  updateCellContents(currentRow);
}

function getClickedRow(event) {
  let clickedButton = event.target;
  return clickedButton.closest('tr');
}

function updateCellContents(row) {
  let tds = row.getElementsByTagName("td");
  updateCell(tds, 5, "yumm");
  updateCell(tds, 8, "cake");
  updateCell(tds, 9, "to");
  updateCell(tds, 10, "eat");
}

function updateCell(tds, index, newValue) {
  if (index < tds.length) {
    tds[index].innerText = newValue;
  }
}

// Add click event listener to the buttons with the class 'edit_button'
document.querySelectorAll('.edit_button').forEach(button => {
  button.addEventListener('click', addAccessory);
});
    <table class="table table-bordered bg-white w-full" id="tableModel">
  <thead>
    <tr>
      <th class="text-left" style="border: 1px solid gray;">No</th>
      <th class="text-left" style="border: 1px solid gray;">Action</th>
      <th class="text-left" style="border: 1px solid gray;">Product Category</th>
      <th class="text-left" style="border: 1px solid gray;">Model</th>
      <th class="text-left" style="border: 1px solid gray;">Code</th>
      <th class="text-left" style="border: 1px solid gray;">Description</th>
      <th class="text-left" style="border: 1px solid gray;">Color</th>
      <th class="text-left" style="border: 1px solid gray;">Accessory</th>
      <th class="text-left" style="border: 1px solid gray;">Frame</th>
      <th class="text-left" style="border: 1px solid gray;">Foam</th>
      <th class="text-left" style="border: 1px solid gray;">Leg/Base</th>
      <th class="text-left" style="border: 1px solid gray;">Total Unit Price</th>
      <th class="text-left" style="border: 1px solid gray;">Qty</th>
      <th class="text-left" style="border: 1px solid gray;">Subtotal</th>
      <th class="text-left" style="border: 1px solid gray;">Remark</th>

    </tr>
  </thead>

  <tbody>

    <tr>
      <td>1</td>
      <td>
        <button class="trashben btn btn-outline-primary" style="border-width: 2px;">
                        <i class="fas fa-pencil"></i>
                    </button>
        <button class="trashben btn btn-outline-danger" style="border-width: 2px;">
                    <i class="fas fa-trash-alt"></i>
                    </button>
        <button type="button" class="btn btn-outline-primary" id="partial-submit">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button" role="button" onclick="addAccessory(event)"><i class="fa-solid fa-pen-to-square"></i>Add</button>

      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <button class="trashben btn btn-outline-primary" style="border-width: 2px;">
                        <i class="fas fa-pencil"></i>
                    </button>
        <button class="trashben btn btn-outline-danger" style="border-width: 2px;">
                    <i class="fas fa-trash-alt"></i>
                    </button>
        <button type="button" class="btn btn-outline-primary" id="partial-submit">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button" role="button" onclick="addAccessory(event)"><i class="fa-solid fa-pen-to-square"></i>Add</button>

      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <button class="trashben btn btn-outline-primary" style="border-width: 2px;">
                        <i class="fas fa-pencil"></i>
                    </button>
        <button class="trashben btn btn-outline-danger" style="border-width: 2px;">
                    <i class="fas fa-trash-alt"></i>
                    </button>
        <button type="button" class="btn btn-outline-primary" id="partial-submit">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button" role="button" onclick="addAccessory(event)"><i class="fa-solid fa-pen-to-square"></i>Add</button>

      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>


  </tbody>
  </tr>

</table>
    Login or Signup to reply.
  2. 0

    Please delegate, it makes the code much simpler and easier to modify.

    I changed the ID of the partial submit to a class and the class "trashben" to "delete" and changed the class of the edit button to "edit" instead of "trashben"

    const updateCell = (tds, index, newValue) => {
  if (index >= tds.length) return;
  tds[index].innerText = newValue;
};

const updateCellContents = (row) => {
  let tds = row.querySelectorAll("td");
  updateCell(tds, 5, "yumm");
  updateCell(tds, 8, "cake");
  updateCell(tds, 9, "to");
  updateCell(tds, 10, "eat");
}


// Add ONE click event listener to the tbody
document.querySelector('#tableModel tbody').addEventListener('click', (e) => {
  const tgt = e.target.closest("button"); // to handle siblings
  const row = tgt.closest("tr");
  if (tgt.matches(".add")) updateCellContents(row);
  else if (tgt.matches(".edit")) console.log("edit")
  else if (tgt.matches(".delete")) row.remove();
  else if (tgt.matches(".partial-submit")) console.log("SUBMIT")
});
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table class="table table-bordered bg-white w-full" id="tableModel">
  <thead>
    <tr>
      <th class="text-left" style="border: 1px solid gray;">No</th>
      <th class="text-left" style="border: 1px solid gray;">Action</th>
      <th class="text-left" style="border: 1px solid gray;">Product Category</th>
      <th class="text-left" style="border: 1px solid gray;">Model</th>
      <th class="text-left" style="border: 1px solid gray;">Code</th>
      <th class="text-left" style="border: 1px solid gray;">Description</th>
      <th class="text-left" style="border: 1px solid gray;">Color</th>
      <th class="text-left" style="border: 1px solid gray;">Accessory</th>
      <th class="text-left" style="border: 1px solid gray;">Frame</th>
      <th class="text-left" style="border: 1px solid gray;">Foam</th>
      <th class="text-left" style="border: 1px solid gray;">Leg/Base</th>
      <th class="text-left" style="border: 1px solid gray;">Total Unit Price</th>
      <th class="text-left" style="border: 1px solid gray;">Qty</th>
      <th class="text-left" style="border: 1px solid gray;">Subtotal</th>
      <th class="text-left" style="border: 1px solid gray;">Remark</th>

    </tr>
  </thead>

  <tbody>

    <tr>
      <td>1</td>
      <td>
        <button class="edit btn btn-outline-primary" type="button" style="border-width: 2px;">
          <i class="fas fa-pencil"></i>
        </button>
        <button class="delete btn btn-outline-danger" type="button" style="border-width: 2px;">
          <i class="fas fa-trash-alt"></i>
        </button>
        <button class="btn btn-outline-primary partial-submit" type="button">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button add" role="button"><i class="fa-solid fa-pen-to-square"></i>Add</button>

      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <button class="edit btn btn-outline-primary" type="button" style="border-width: 2px;">
          <i class="fas fa-pencil"></i>
        </button>
        <button class="delete btn btn-outline-danger" type="button" style="border-width: 2px;">
          <i class="fas fa-trash-alt"></i>
        </button>
        <button class="btn btn-outline-primary partial-submit" type="button">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button add" role="button"><i class="fa-solid fa-pen-to-square"></i>Add</button>

      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <button class="edit btn btn-outline-primary" type="button" style="border-width: 2px;">
          <i class="fas fa-pencil"></i>
        </button>
        <button class="delete btn btn-outline-danger" type="button" style="border-width: 2px;">
          <i class="fas fa-trash-alt"></i>
        </button>
        <button class="btn btn-outline-primary partial-submit" type="button">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button add" role="button"><i class="fa-solid fa-pen-to-square"></i>Add</button>

      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>

  </tbody>


</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search