javascript - 输入输入字段后表格单元格变形

Question

这和我的类似:

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  var tdCollection = document.querySelectorAll('td');
  for (var i = 0; i < tdCollection.length; i++) {
  	var field = document.createElement('input');
    field.setAttribute('type', 'text');
    field.setAttribute('name', 'Field');
    field.setAttribute('value', tdCollection[i].textContent);
    tdCollection[i].innerHTML = "";
    tdCollection[i].appendChild(field);
  }
  
});

td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
</table>
<button name="edit">Edit</button>

我希望表格单元格即使在按下“编辑”按钮后也能保持原来的宽度。将输入字段宽度设置为它们的父单元格之一是理想的，但如果没有办法将它们固定到单元格，也可以将字段宽度调整为其值并使用 overflow: hidden 可以工作宽度。

谢谢你的帮助:D

编辑

我试图保留每一列的自然宽度，如果有办法的话，我想避免每一列的宽度都相等。

Answer 1

您可以为 td 和要附加到 td 的 input 设置固定的高度和宽度。

尝试以下方式:

var btn = document.querySelector('button');
var cellWidth = document.getElementById('myTable').rows[0].cells[0].offsetWidth;
var cellHeight = document.getElementById('myTable').rows[0].cells[0].offsetHeight;
console.log(cellHeight)
btn.addEventListener('click', function() {
  var tdCollection = document.querySelectorAll('td');
  for (var i = 0; i < tdCollection.length; i++) {
  	var field = document.createElement('input');
    field.setAttribute('type', 'text');
    field.setAttribute('name', 'Field');
    field.setAttribute('value', tdCollection[i].textContent);
    field.style.width = (cellWidth - (4 + 4)) + 'px'; // removing approximate border of input element from left and right to fit into td.
    field.style.height = (cellHeight) + 'px'; // removing approximate border of input element from left and right to fit into td.
    tdCollection[i].innerHTML = "";
    tdCollection[i].appendChild(field);
  }
  
});

td {
  border: 1px solid black;
}
/*table td, input {
    width: 100px;
    height: 50px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}*/

<table id="myTable">
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
</table>
<button name="edit">Edit</button>