how to get input and then add in our table in html

sepehrramezani
May 3, 2024
92 views
0 votes
2 Answers

hello every body i want write a code to get input and then add that info in table under input

th,
td {
  border: 1px solid black;
  background-color: white;
  border-radius: 10px;
}

th {
  background-color: rgb(255, 255, 46);
}

<table style="width:100%">
  <tr>
    <th style="width:50%;">x</th>
    <th style="width:50%;">y</th>
  </tr>
</table>

if you know i will happy to how i can do it

Answers

To achieve this, you will need Javascript functions keyDown, keyUp or keyPress (Deprecated).

Using JS, you get the input value and then write it on the desired output element as shown below.

I have added two input elements to the HTML, one to handle keydown, and the other keyup.

function myKeyUpFunction() {
  let inputElem = document.getElementById('keyupInput')
  let value = inputElem.value

  let outputElem = document.getElementById('keyupOutput')
  outputElem.innerText = value
}

function myKeyDownFunction() {
  let inputElem = document.getElementById('keydownInput')
  let value = inputElem.value

  let outputElem = document.getElementById('keydownOutput')
  outputElem.innerText = value
}

th,
td {
  border: 1px solid black;
  background-color: white;
  border-radius: 10px;
  padding: 0.5rem;
}

th {
  background-color: rgb(255, 255, 46);
}

input {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

<!DOCTYPE html>
<html>

<body>
  <label for="keyupInput">Key up:</label>
  <input type="text" id="keyupInput" onkeyup="myKeyUpFunction()" placeholder="Press me to write..." />

  <label for="keydownInput">Key down:</label>
  <input type="text" id="keydownInput" onkeydown="myKeyDownFunction()" placeholder="Press me to write..." />


  <table style="width:100%">
    <tr>
      <th style="width:50%;">Keyup output</th>
      <th style="width:50%;">KeyDown output</th>
    </tr>

    <tr>
      <td id="keyupOutput"></td>
      <td id="keydownOutput"></td>
    </tr>
  </table>

</body>

</html>

You’d need to use some JavaScript.

First create 2 different variables for each field
Create functions to change value of x and y on change of the input boxes

let x = '';
let y = '';

function updateX() {
  x = document.getElementById("inp1").value;
  document.getElementById("th1").innerHTML = x;
}

function updateY() {
  y = document.getElementById("inp2").value;
  document.getElementById("th2").innerHTML = y;
}

th,
td {
  border: 1px solid black;
  background-color: white;
  border-radius: 10px;
}

th {
  background-color: rgb(255, 255, 46);
}

<input type="text" placeholder="Field 1" id="inp1" name="inp1" oninput="updateX()" />

<input type="text" placeholder="Field 2" id="inp2" name="inp2" oninput="updateY()" />

<table style="width:100%; margin-top: 1em;">
  <tr>
    <th style="width:50%;height:2em;" id="th1"></th>
    <th style="width:50%;height:2em;" id="th2"></th>
  </tr>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.