表格内支持自定义输入的select组件单元格高度翻倍问题求助

问题出在.editOption使用了相对定位（position: relative），相对定位的元素仍会占据原文档流空间，导致select和输入框的高度叠加，撑开了单元格。只需调整CSS让输入框脱离文档流，同时修正JS里的一个小bug即可：

修正后的CSS #

#tid td {
  border-collapse: collapse;
  border: 1px solid black;
  width: 80px;
  /* 设置为relative，作为输入框的定位容器 */
  position: relative;
}

.editOption {
  width: 80%;
  /* 改为绝对定位，脱离文档流，不占据单元格空间 */
  position: absolute;
  top: 0;
  left: 5px;
  border: 0;
  /* 背景设为白色，覆盖select区域，输入体验更自然 */
  background: white;
}

修正后的JavaScript #

原JS中keyup事件里的$(this)指向输入框本身，$(this).find('.editOption')会找不到目标元素，同时要避免重复绑定事件，调整后代码如下：

$('#tid > tbody > tr > td:nth-child(2)').change(function() {
  var $td = $(this);
  var selected = $('option:selected', this).attr('class');

  if (selected == "editable") {
    var $input = $td.find('.editOption').show();
    // 先解绑再绑定，避免重复触发事件
    $input.off('keyup').on('keyup', function() {
      var editText = $(this).val();
      $td.find('.editable').val(editText);
    });
  } else {
    $td.find('.editOption').hide();
  }
});

原理说明 #

1. 把表格单元格td设为position: relative，让输入框能以它为基准定位；
2. 输入框改用position: absolute后会脱离正常文档流，不会额外占用单元格空间，自然不会导致单元格高度翻倍；
3. 调整输入框的位置参数，让它刚好覆盖在select上方，用户输入时的视觉体验更连贯；
4. 修正JS事件绑定的逻辑错误，确保输入值能正确同步到select的自定义选项中，同时避免重复绑定事件引发的异常。

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