为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

隔江千里 2022-12-02 16:50:25
<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
查看完整描述

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>


查看完整回答
反对 回复 2022-12-02
?
MMMHUHU

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

}


查看完整回答
反对 回复 2022-12-02
?
翻翻过去那场雪

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>


查看完整回答
反对 回复 2022-12-02
  • 3 回答
  • 0 关注
  • 104 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号