将td内容上溢到下一个td元素，而不替换HTML表

Question

考虑以下模型-

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

有人可以建议实现此目标的方法吗？

Answer 1

像这样吗

 $(function() { $('input').on('focus blur', function(e) { var elem = $(this), td = elem.closest('td'), div = td.find('div'); show = ( e.type == 'focus' ); td.toggleClass('flowTD', show); div.toggleClass('flowDIV'); }); }); 

 * { box-sizing: border-box; } td { padding: 0 .25em; height: 3em; border: 1px solid lightgreen; } input { width: 3em; } .flowTD { padding-top: 0; vertical-align: top; } .flowDIV { position: absolute; border: 1px solid blue; background: lightblue; height: 3em; vertical-align: middle; line-height: 3em; margin-left: -.25em; margin-top: -1px; padding: 0 .25em; } div input[type="submit"] { display: none; width: auto; } div.flowDIV input[type="submit"] { display: inline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>2749.5</td> <td>0.13</td> <td> <div> <input type="text" /> <input type="submit" value="Save" /> <input type="submit" value="Cancel" /> </div> </td> <td>buttons</td> </tr> </table> 

这将需要一些调整，但可以让您先行一步。

Answer 2

您可以创建用于编辑的按钮，然后使用保存和取消按钮隐藏输入，这些按钮将在单击编辑按钮时显示。 将其设置为绝对值即可。

像这样：

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>

CSS

table {
  border-collapse: collapse;
  background: #fff;
  position: relative;
  width:450px; 
}

th,td {
  padding: 15px;
  text-align: left;
  width:25%;
  border-bottom: 1px solid #ddd;
}

input {
  width: 80px;
}

.show {
  display: none;
  position: absolute;
  right: 15px;
  top:15px;
  background: #F6FAFE;
}

jQuery的

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

您可以在这里进行测试https://jsfiddle.net/azdfdss5/