如何扩大表格单元格的可编辑区域？

Question

我之前曾两次问过这个问题（[1]、[2]）并得到了一些很好的答案，但没有一个是我想要的。

情况：我有一张表格，其中一列的单元格是contentEditable。 问题：可编辑区域没有到达单元格的所有边缘。相反，在可编辑部分下方有一个不可编辑区域的薄填充 (5px)。我希望保留 5px 的空间，但也希望它是可编辑的（即我喜欢尺寸，但不喜欢它的不可编辑方面）。

我已经知道 JavaScript 允许 document.getElementById("id").contentEditable = true; 属性执行此操作。事实上，我更喜欢使用这种方法（如果有方法，请告诉我）！ 但是，我故意尝试在单元格的一端设置一个不可编辑的单元，使用<span>，当我需要单元格执行功能时（例如，当添加数字总和时，单元被解析为整数，输出变为 NaN） .

从视觉上看，我正在寻找的是这个模型中所示的内容：

下面是不必要的填充（除了右侧）的可视化表示，以红色显示（我更改了 CSS 中的颜色只是为了让它在此处可见）。需要明确的是，我仍然喜欢单元格的尺寸，但我想让单元格的整个区域可编辑，除了文本“kg”所在的位置。此外，“kg”右侧的红色区域不是不必要的填充，它应该保持不可编辑。

另外，这是我目前的代码：

function myFunction() {
  var jack = document.getElementById("jack").innerText;
  var john = document.getElementById("john").innerText;
  var joe = document.getElementById("joe").innerText;

  var total = parseInt(jack) + parseInt(john) + parseInt(joe);

  document.getElementById("total").innerHTML = total;
}

myFunction();

* {
  box-sizing: border-box;
}

table {
  width: 100%;
}

table,
tr,
th,
td {
  background-color: #fff;
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

td:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
}

td:last-child,
span:first-child {
  flex-grow: 1;
  margin-right: 10px;
  outline: none;
  text-align: right;
}

.cell {
  height: 30px;
}

#total {
  display: flex;
  justify-content: flex-end;
}

<table>
  <thead>
    <tr class="cell">
      <th>Person</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cell">
      <td>Jack</td>
      <td id="jack" oninput="myFunction()">
        <span contentEditable="true">4000</span>
        <span>kg</span>
      </td>
    </tr>
    <tr class="cell">
      <td>John</td>
      <td id="john" oninput="myFunction()">
        <span contentEditable="true">200</span>
        <span>kg</span>
      </td>
    </tr>
    <tr class="cell">
      <td>Joe</td>
      <td id="joe" oninput="myFunction()">
        <span contentEditable="true">3</span>
        <span>kg</span>
      </td>
    </tr>
    <tr class="cell">
      <td>Total</td>
      <td>
        <span id="total"></span>
        <span>kg</span>
      </td>
    </tr>
  </tbody>
</table>

如您所见，在右列单元格的角落/边缘，顶部、底部和左侧大约有 5 像素的不可编辑空间。 有没有办法让这个特定的部分在没有接收单元右侧（单位所在）单位的函数的情况下可编辑？

非常感谢任何帮助！

Answer 1

只需在 CSS 中使用 padding:0;，您不需要填充。您可能还想使用*{ box-sizing:border-box; } 作为最佳实践，这样内边距和边框就成为所有元素的宽度和高度的一部分。

Answer 2

您发布的关于计算的标题与您的问题（关于演示）不同。

如果您想保留当前代码，可以使用document.querySelector("#jack span:first-child")，然后申请parseInt()。填充的问题是您在表格单元格上使用 flexbox。要解决这两个问题，您可以使用:after 伪元素并删除内部跨度和display: flex。

此外，对于 parseInt，您需要按照其他答案中的建议使用 || 运算符添加默认值。

这是一个例子：

function myFunction() {
  var jack = document.getElementById("jack").innerText;
  var john = document.getElementById("john").innerText;
  var joe = document.getElementById("joe").innerText;

  var total = (parseInt(jack) || 0) + (parseInt(john) || 0) + (parseInt(joe) || 0);

  document.getElementById("total").innerHTML = total;
}

myFunction();

table {
  width: 100%;
}

table,
tr,
th,
td {
  background-color: #fff;
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

td:last-child {
  border: none;
  text-align: right;
  outline: 0;
}

td:last-child::after {
  content: " kg";
}

.cell {
  height: 30px;
}

<table>
  <thead>
    <tr class="cell">
      <th>Person</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cell">
      <td>Jack</td>
      <td id="jack" oninput="myFunction()" contentEditable="true">
        3000
      </td>
    </tr>
    <tr class="cell">
      <td>John</td>
      <td id="john" oninput="myFunction()" contentEditable="true">
        200
      </td>
    </tr>
    <tr class="cell">
      <td>Joe</td>
      <td id="joe" oninput="myFunction()" contentEditable="true">3
      </td>
    </tr>
    <tr class="cell">
      <td>Total</td>
      <td id="total">
      </td>
    </tr>
  </tbody>
</table>

Answer 3

右边这个margin是flex-box造成的，可以去掉

display: flex;

之后，您可能会注意到整个单元格被损坏以修复它，像这样编辑您的函数：

function myFunction() {
   var jack = document.getElementById("jack").innerText;
   var john = document.getElementById("john").innerText;
   var joe = document.getElementById("joe").innerText;

   var total = parseInt(jack) + parseInt(john) + parseInt(joe);

   document.getElementById("total").innerText = total + " kg";
}

myFunction();

和你的 HTML :

<td id="total">
   <span>0</span>
   <span>kg</span>
</td>

Answer 4

这也可能在未来有所帮助：

在做 css 的时候我也遇到了很多这样的问题，到目前为止我找到的最好的解决方案是：

如果你有任何额外的样式：

-> Ctrl+Shift+I 你会得到开发者页面。

-> 转到样式选项卡旁边的计算选项卡

-->然后比较你指定的样式值和值，你会自己找到解决方案。

这就是我如何为自己找到关于样式问题的解决方案。希望对你也有帮助。

Answer 5

我使用<input /> 而不是<span /> 进行编辑（个人喜好）。

单位是从单元格右侧浮动 5px 的跨度 (Absolute span in a relative div inside a td)。

对于输入：隐藏边框，占据100%的宽度和高度，填充大约25px（因此单元将保持在文本框内容的右侧）。

还添加了列宽。

function myFunction() {
  var jack = document.getElementById("inpJack").value;
  var john = document.getElementById("inpJohn").value;
  var joe = document.getElementById("inpJoe").value;

  var total = parseInt(jack) + parseInt(john) + parseInt(joe);

  document.getElementById("total").innerHTML = total;
}

myFunction();

* {
  box-sizing: border-box;
}

table {
  width: 100%;
}

table,
tr,
th,
td {
  background-color: #fff;
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.cell {
  vertical-align: middle;
}

.tdPersonName, .tdHeader {
  height: 30px;
  padding-left: 5px;
}

.divInputContainer {
 position:relative;
}

.withUnit, .inpWithUnit {
  text-align: right;
  padding-right: 25px;
}

.inpWithUnit {
  font-family: Arial, sans-serif;
  font-size: 16px;
  height: 30px;
  width: 100%;
  height: 100%;
  margin:0;
  border: none;
}

.inpWithUnit:focus {
    outline-width: 0;
}

.spUnit {
 position:absolute; right:5px;
}

#total {
  display: flex;
  justify-content: flex-end;
}

<table>
  <colgroup>
    <col style="width: 40%;">
    <col style="width: 60%;">
  </colgroup>
  <thead>
    <tr class="cell">
      <th class="tdHeader">Person</th>
      <th class="tdHeader">Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cell">
      <td class="tdPersonName">Jack</td>
      <td id="jack" oninput="myFunction()">
        <div class="divInputContainer">
          <span class="spUnit">kg</span>
          <input id="inpJack" class="inpWithUnit" value="4000" />
        </div>
      </td>
    </tr>
    <tr class="cell">
      <td class="tdPersonName">John</td>
      <td id="john" oninput="myFunction()">
        <div class="divInputContainer">
          <span class="spUnit">kg</span>
          <input id="inpJohn" class="inpWithUnit" value="200" />
        </div>
      </td>
    </tr>
    <tr class="cell">
      <td class="tdPersonName">Joe</td>
      <td id="joe" oninput="myFunction()">
        <div class="divInputContainer">
          <span class="spUnit">kg</span>
          <input id="inpJoe" class="inpWithUnit" value="3" />
        </div>
      </td>
    </tr>
    <tr class="cell">
      <td class="tdPersonName">Total</td>
      <td>
        <div class="divInputContainer">
          <span class="spUnit">kg</span>
          <span id="total" class="withUnit" />
        </div>
      </td>
    </tr>
  </tbody>
</table>

编辑：

我们可以通过删除单元格和文本框上的填充来减少空间，但是，仍然会在文本上方和下方保留一点空间。这是因为字体就是这样。这些数字不占用从上到下的全部空间。例如，1234 的底部高于 'g' 或 'q' 的底部。

Worth reading