Javascript 将td内容溢出到下一个td元素，而不替换HTML表中的内容

考虑下面的模型-

第三列包含一个按钮，单击该按钮时，将替换为文本框并保存；取消按钮。整个实体溢出到下一个td元素，在顶部浮动，而不会移动下一个td元素中的按钮。这一切都是在

元素中完成的

有人能提出一个实现这一目标的方法吗？

类似的方法吗

$（函数（）{
$（'input'）。打开（'focus blur'，函数（e）{
var elem=$（此），
td=元素最近（'td'），
div=td.find（'div'）；
show=（e.type='focus'）；
td.toggleClass（'flowTD'，show）；
div.toggleClass（“flowDIV”）；
});
});
*{框大小：边框框；}
运输署{
填充：0.25em；
高度：3em；
边框：1px实心浅绿色；
}
输入{
宽度：3em；
}
.flowTD{
填充顶部：0；
垂直对齐：顶部；
}
.flowDIV{
位置：绝对位置；
边框：1px纯蓝色；
背景：浅蓝色；
高度：3em；
垂直对齐：中间对齐；
线高：3em；
左边距：-.25em；
页边顶部：-1px；
填充：0.25em；
}
div输入[type=“submit”]{
显示：无；
宽度：自动；
}
div.flowDIV输入[type=“submit”]{
显示：内联；
}

2749.5
0.13
按钮
您可以创建编辑按钮，然后使用“保存”和“取消”按钮隐藏输入，这些按钮将在单击“编辑”按钮时显示。将它设置为绝对值，就是这样

大概是这样的：

HTML

<table>
  <tr>
    <td>2749.5</td>
    <td>0.13</td>
    <td>
      <button class="click">3.5</button>
      <div class="show">
        <input type="text" class="showInput">
        <button class="save">Save</button>
        <button class="cancel">Cancel</button>
      </div>
    </td>
    <td>
      <button>></button>
      <button>||</button>
    </td>
  </tr>
</table>

jQuery

$('.click').on('click', function() {
  $(this).hide();
  $('.show').show();
});
$('.save,.cancel').on('click', function() {
  $('.show').hide();
  $('.click').show();
});

您可以在此处测试它
如果您可以共享您尝试过的代码，那么将很容易提供帮助。您是否想过使用
colspan=2
将第三列的长度增加为两列，同时在选择过程中删除最后一列？或隐藏
$('.click').on('click', function() {
  $(this).hide();
  $('.show').show();
});
$('.save,.cancel').on('click', function() {
  $('.show').hide();
  $('.click').show();
});