HTML表格中集成用户输入字段：纯前端实现教程

<table id="user_feature">
  <thead>
    <tr>
      <th>用户</th>
      <th>喜剧评分</th>
      <th>恐怖评分</th>
    </tr>
  </thead>
  <tbody>
    <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>您</td>
      <td><input type="text" name="comedy" id="comedy_input" placeholder="请输入喜剧评分"></td>
      <td><input type="text" name="horror" id="horror_input" placeholder="请输入恐怖评分"></td>
    </tr>
  </tbody>
</table>

function getFeatureValues() {
  // 通过ID获取喜剧评分输入框元素
  const comedyInput = document.getElementById('comedy_input');
  // 通过ID获取恐怖评分输入框元素
  const horrorInput = document.getElementById('horror_input');

  // 获取输入框的值
  const comedyValue = comedyInput.value;
  const horrorValue = horrorInput.value;

  console.log('用户输入的喜剧评分:', comedyValue);
  console.log('用户输入的恐怖评分:', horrorValue);

  // 示例：将字符串转换为数字进行计算
  const parsedComedy = parseFloat(comedyValue);
  const parsedHorror = parseFloat(horrorValue);

  if (!isNaN(parsedComedy) && !isNaN(parsedHorror)) {
    const sum = parsedComedy + parsedHorror;
    console.log('评分总和:', sum);
    return { comedy: parsedComedy, horror: parsedHorror, sum: sum };
  } else {
    console.warn('输入值无效，无法进行计算。');
    return null;
  }
}

// 可以在某个事件触发时调用此函数，例如点击按钮
// 假设页面上有一个按钮，ID为 'calculateButton'
// document.getElementById('calculateButton').addEventListener('click', getFeatureValues);

// 或者在页面加载后立即尝试获取（如果用户已经输入）
// getFeatureValues();