纯JavaScript实现HTML表格用户输入行取值计算（无jQuery）

完全可以不依赖jQuery，仅用原生JavaScript实现这个需求，不需要引入任何第三方库。

首先你现有代码里可编辑区域的写法有问题：<input>是独立的表单元素，不能作为<td>标签的属性写在td标签里，需要把input作为td的子元素放置，修正后的表格代码如下：

<table id="user_feature">
  <tr>
    <th>User</th>
    <th>Comedy</th>
    <th>Horror</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>0.3</td>
    <td>0.8</td>
  </tr>
  <tr>
    <td>Jonny</td>
    <td>0.7</td>
    <td>0.1</td>
  </tr>
  <tr>
    <td>Kimi</td>
    <td>0.1</td>
    <td>0.9</td>
  </tr>
  <tr>
    <td>You</td>
    <td><input type="text" placeholder="输入Comedy偏好值" name="comedy" id="comedy"></td>
    <td><input type="text" placeholder="输入Horror偏好值" name="horror" id="horror"></td>
  </tr>
</table>

实现步骤 #

• 给触发计算的节点（比如专门加的计算按钮，或者输入框失焦事件）绑定原生事件监听
• 通过原生DOM API获取最后一行两个输入框的DOM实例，读取value属性拿到用户输入的内容
• 因为input拿到的值默认是字符串格式，做数值计算前要先转成数值类型，同时做好输入合法性校验，避免非数值输入导致计算异常

参考JS实现代码：

// 示例：计算逻辑，你可以根据自己的业务场景调整触发时机
const calculate = () => {
  // 读取用户输入
  const comedyScore = Number(document.getElementById('comedy').value.trim());
  const horrorScore = Number(document.getElementById('horror').value.trim());

  // 输入校验
  if (isNaN(comedyScore) || isNaN(horrorScore)) {
    alert('请输入有效的数值');
    return;
  }

  // 后续直接用拿到的两个值做计算即可
  console.log('Comedy 偏好值：', comedyScore);
  console.log('Horror 偏好值：', horrorScore);
}

// 假设你页面上加了id为calcBtn的计算按钮，就可以这么绑定事件
// document.getElementById('calcBtn').addEventListener('click', calculate);

如果你不想插入input标签，也可以直接给最后一行的两个td加上contenteditable="true"属性，让单元格本身支持编辑，取值的时候读取对应td的textContent再转成数值即可，效果是一样的。

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