javascript - 通过 oninput 函数获取可编辑标签的值？

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

标签： javascript

Answer 1

为什么不更抽象呢？

const data = {}

const setup = () => {
    document.querySelectorAll('td').forEach(td => td.addEventListener('input', setText));
  
  const btn = document.querySelector('button');
  btn.addEventListener('click', (event) => console.log(data));
}

const updateObject = (key, value) => data[key] = value;

const setText = (event) => {
    const target = event.currentTarget;
  const key = target.dataset.var;
  const value = target.textContent;
  
  updateObject(key, value);
}

window.addEventListener('load', setup)

td {
  background: red;
  min-width: 5em;
}

<table>
  <tr>
    <td contenteditable="true" data-var="name_of_child"></td>
    <td contenteditable="true" data-var="date_of_birth"></td>
    <td contenteditable="true" data-var="living_or_deceased"></td>
  </tr>
</table>
<button>
Show Object
</button>