为何textarea手动修改后，点击表格单元格不再同步更新内容？

实现异常的核心原因是对textarea元素错误使用.text()方法赋值：

• .text()方法操作的是DOM层的元素子文本节点，不会同步修改表单元素对应的实际value属性
• 初始状态下textarea未被用户交互修改时，DOM文本节点和内部存储的value值一致，首次点击单元格可以正常填充内容
• 一旦用户手动修改过textarea内容，浏览器会将输入内容写入value属性，此时DOM层子文本节点不再和value值保持同步；后续再用.text()修改DOM文本节点，完全不会影响用户实际看到的表单内容，就会出现点击单元格无法更新textarea的问题

将赋值逻辑替换为使用jQuery表单值专用的.val()方法，该方法直接读写表单元素的value属性，无论用户是否手动编辑过textarea，都能正常响应内容更新：

$(document).ready(function() {
  $('tbody').on("click", "td", function() {
    $("textarea").val($(this).text());
  });
});

补充说明：

• 原代码中绑定事件时定义的形参a没有被实际使用，可以直接省略，不影响功能运行
• 该写法兼容全版本jQuery，不会出现手动编辑后赋值失效的问题

内容的提问来源于stack exchange，提问作者lockness