使 td 中的每个文本输入都在一个范围内答案

【问题标题】：Make every text input in td be in a span使 td 中的每个文本输入都在一个范围内
【发布时间】：2021-04-06 10:23:45
【问题描述】：

我正在尝试创建一个能够格式化单元格文本的电子表格，例如让它大胆。当信息可用于该单元格时，我还需要可以显示每个单元格的信息框。我将信息框创建为每个 td 中的 div，默认情况下它们是隐藏的。

我目前格式化每个单元格文本的方式是将一个类应用于 td.这将格式化文本，但也会格式化信息框中的文本，这是我不想要的。

我一直在考虑将 textNode 中的文本包装在一个跨度中，然后仅将格式化类应用于该跨度。只要跨度中有文本，写入单元格中的新文本也将在跨度内。但是当单元格中的所有文本都被删除并写入新文本时，新文本会在新的 textNode 中创建，而不是在 span 中创建，尽管 span 仍然存在。这意味着，新写入的文本不会被格式化。

对这个问题的最佳解决方案有什么建议吗？有没有办法让输入默认出现在跨度中或类似的东西？

我的单元格外观示例：

<td id="cell-4-5" contenteditable="true">Test<div class="infoBox" contenteditable="false" style="display: none;"></div></td>

【问题讨论】：

创建一个自定义函数，它会返回一个新创建的spanput，这将是一个包裹在 span 元素中的输入元素。
我不相信tds正常有输入元素？但是我尝试使用 et input = $('') let span = $('') span.append(input) cell.append(span) 这使得电子表格需要永远加载，而且它也看起来很奇怪。
你的标题说单元格中有输入......但是现在在你编辑了问题之后，看起来你实际上有可编辑的单元格。将跨度添加到单元格中，并使跨度而不是单元格本身可编辑。
是的，没有很好的解释。不过谢谢，它奏效了。

标签： javascript html css text html-table

【解决方案1】：

这可以使用简单的 javascript 获得。我为你做了一个示范。看看吧。

document.querySelectorAll('#input-table td').forEach(single=>{
let ip = single.innerHTML;
let sp = "<span>"+ip+"</span>";
single.innerHTML = sp;
})

<table id="input-table">
<tr>
<td><input type="text" placeholder="Input 1"></td>
<td><input type="text" placeholder="Input 2"></td>
</tr>
<tr>
<td><input type="text" placeholder="Input 3"></td>
<td><input type="text" placeholder="Input 4"></td>
</tr>
</table>

【讨论】：

我解释得很糟糕。我的 cells / td 没有任何输入元素。因此，当我在单元格中写入时，文本就在 textNode 元素中。
我的单元格看起来像这样，当我在单元格中写了“test”时：Test

【解决方案2】：

我不知道您对 td 的重新格式化可能有多广泛，但如果它只是一些您知道您可能想要更改的东西，例如粗体/颜色等，请将 infoBox 类设置为您想要的是。 td div.infoBox 的更高特异性将覆盖 td 的任何设置（包括任何样式设置）。

例如：

    td {
      color: red;
      font-weight: bold;
    /*etc;*/
    }
    
/* now ensure you have the formatting you want in the infoBox */
    
    td div.infoBox {
      color: black;
      font-weight: normal;
    /*etc*/
    }

td {
  color: red;
  font-weight: bold;
}
td div.infoBox {
  color: black;
  font-weight: normal;
}

<table>
  <tr>
    <td id="cell-4-5" contenteditable="true">Test<div class="infoBox" contenteditable="false" style="display: block;">info in div</div></td>
  </tr>
</table>

【讨论】：