如何获取输入然后添加到我们的html表格中

问题描述 投票:0回答:1

大家好,我想编写一个代码来获取输入,然后将该信息添加到输入下的表中

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>

如果你知道我会很高兴我能做到这一点

html css input html-table
1个回答
0
投票

要实现此目的,您将需要 Javascript 函数 keyDownkeyUpkeyPress(已弃用)。

使用 JS,您可以获取输入值,然后将其写入所需的输出元素,如下所示。

我在 HTML 中添加了两个输入元素,一个用于处理 keydown,另一个用于处理 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>

© www.soinside.com 2019 - 2024. All rights reserved.