3 回答

TA贡献1998条经验 获得超6个赞
为什么不更抽象一些呢?
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>

TA贡献1834条经验 获得超8个赞
您可以为每个对象提供唯一的 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) {
var val = document.getElementById(id).textContent
}

TA贡献2065条经验 获得超14个赞
读取您传入的引用的 innerHTML 或 textContent 以获取用户键入的内容。
function set_text(td, foo) {
console.log(td.innerHTML);
}
table, tr { width: 100%;}
td { width: 33%;}
<table>
<tr>
<td contenteditable="true" class="name_of_child" oninput="set_text(this,'name_of_child_1')">x</td>
<td contenteditable="true" class="date_of_birth" oninput="set_text(this,'date_of_birth_1')">y</td>
<td contenteditable="true" class="living_or_deceased" oninput="set_text(this,'living_or_deceased_1')">z</td>
</tr>
</table>
添加回答
举报