溢出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/

进行测试