通过 oninput 函数获取可编辑 <td> 标签的值？

Question

<td contenteditable="true" class="name_of_child" oninput="set_text(this,'name_of_child_1')"></td>

<td contenteditable="true" class="date_of_birth" oninput="set_text(this,'date_of_birth_1')"></td>

<td contenteditable="true" class="living_or_deceased" oninput="set_text(this,'living_or_deceased_1')"></td>

我想通过这样oninput的表td元素中的函数获取文本，但遗憾的是，这适用于输入字段，但不适用于表td标签。有没有办法使用或任何其他方式获取td文本？oninput

Answer 1

为什么不更抽象一些呢？const data = {}const setup = () => {&nbsp; &nbsp; document.querySelectorAll('td').forEach(td => td.addEventListener('input', setText));&nbsp;&nbsp;&nbsp; const btn = document.querySelector('button');&nbsp; btn.addEventListener('click', (event) => console.log(data));}const updateObject = (key, value) => data[key] = value;const setText = (event) => {&nbsp; &nbsp; const target = event.currentTarget;&nbsp; const key = target.dataset.var;&nbsp; const value = target.textContent;&nbsp;&nbsp;&nbsp; updateObject(key, value);}window.addEventListener('load', setup)td {&nbsp; background: red;&nbsp; min-width: 5em;}<table>&nbsp; <tr>&nbsp; &nbsp; <td contenteditable="true" data-var="name_of_child"></td>&nbsp; &nbsp; <td contenteditable="true" data-var="date_of_birth"></td>&nbsp; &nbsp; <td contenteditable="true" data-var="living_or_deceased"></td>&nbsp; </tr></table><button>Show Object</button>

Answer 2

您可以为每个对象提供唯一的 id td，然后尝试通过将 id 传递给oninput函数来访问该值。<td id="td1" contenteditable="true" class="name_of_child"oninput="set_text(this,'td1')"></td><td id="td2" contenteditable="true" class="date_of_birth" oninput="set_text(this,'td2')"></td><td id="td3" contenteditable="true" class="living_or_deceased" oninput="set_text(this,'td3')"></td>set_text功能：function set_text(this, id) {&nbsp; &nbsp; var val = document.getElementById(id).textContent}

Answer 3

读取您传入的引用的 innerHTML 或 textContent 以获取用户键入的内容。function set_text(td, foo) {&nbsp; &nbsp;console.log(td.innerHTML);}table, tr { width: 100%;}td { width: 33%;}<table>&nbsp; <tr>&nbsp; &nbsp; <td contenteditable="true" class="name_of_child" oninput="set_text(this,'name_of_child_1')">x</td>&nbsp; &nbsp; <td contenteditable="true" class="date_of_birth" oninput="set_text(this,'date_of_birth_1')">y</td>&nbsp; &nbsp; <td contenteditable="true" class="living_or_deceased" oninput="set_text(this,'living_or_deceased_1')">z</td>&nbsp; </tr></table>