JavaScript 从 HTML table 单元格中提取数据以输入

Question

我有一个 HTML 页面。在页面上我有一个 table 有 8 列和 56 行和一个输入（数字）。

无论我点击哪个单元格，我都希望它将其中的数字传输到 input。我该怎么做？

提前感谢您的帮助。

Answer 1

const myInput = document.querySelector('#myInput');
const cells = document.querySelectorAll('#myTable tr td');

cells.forEach(el => 
    el.addEventListener('click', (e) => myInput.value = e.currentTarget.innerText)
);

这是假设 html 如下所示：

<input type="text" id="myInput" value="" />
<table id="myTable">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

更新（我们在上面所做的分解）：

我们所做的就是让事情变得非常简单。我们为我们之后的元素创建一个选择器。鉴于有多个 table 个单元格，我们使用 querySelectorAll 这将 return 一个元素数组。

然后我们只遍历所有这些元素并为每个元素添加一个 click 事件侦听器。侦听器抓取单元格的 innerText 并将其设置为目标输入框。

这可以根据您的需要进行扩展。选择保持简单，只做要求的事情。

希望对您有所帮助！

JavaScript 从 HTML table 单元格中提取数据以输入

JavaScript pull data from HTML table cell to input

html

javascript

jquery

html-table