Web Tools Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu April 25, 2023 › #dynamically #HowTo

How to display textbox value in table using javascript

To display the value of a textbox in a table using JavaScript, you can follow the following steps.

  1. Get the value of the textbox using its id attribute.
  2. Get a reference to the table and its tbody element, where you want to display the value.
  3. Create a new table row (tr element) and two table cells (td elements) to display the value.
  4. Set the text content of the first cell to a label for the value.
  5. Set the text content of the second cell to the value itself, which we got from the textbox.
  6. Add the new row to the table's tbody element.
<input type="text" id="my-textarea" placeholder="Type Your Name">
<table id="my-table" border="">
  <tbody></tbody>
</table>

<button onclick="myFunction()">Submit</button>
<script>
function myFunction(){
 let textboxValue = document.getElementById("my-textarea").value;
 let table = document.getElementById("my-table");
 let tbody = table.getElementsByTagName("tbody")[0];
 let newRow = tbody.insertRow();
 let cell1 = newRow.insertCell(0);
 let cell2 = newRow.insertCell(1);
 cell1.textContent = "Textbox value:";
 cell2.textContent = textboxValue;
}
</script>

This example adds a new row to the table's tbody element and sets the text content of the two cells to display a label "Textbox value:" and the value of the textbox, respectively.

save
listen
AI Answer
Write Your Answer
loading
back
View All