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

我正在尝试创建一个能够格式化单元格文本的电子表格，例如，将其加粗。我还需要显示每个单元格的信息框，当该单元格有可用信息时。我在每个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>

测试

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

document.querySelectorAll（'#输入表td'）.forEach（single=>{
让ip=single.innerHTML；
设sp=”“+ip+”；
single.innerHTML=sp；
})

---

我不知道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{
颜色：红色；
字体大小：粗体；
}
td div.infoBox{
颜色：黑色；
字体大小：正常；
}

div中的Testinfo

创建一个自定义函数，返回一个新创建的

spanput

，它将是一个封装在span元素中的输入元素。我认为tds通常没有输入元素？但是我试过使用et input=$（''）let span=$（''）span.append（input）cell.append（span）这使得加载电子表格花费了很长时间，而且看起来很奇怪。你的标题说单元格中有输入。。。但现在，在编辑了问题之后，似乎实际上有了可编辑的单元格。将跨度添加到单元格中，并使跨度可编辑，而不是单元格本身。是的，解释得不是很好。但是谢谢，它成功了。我解释得很糟糕。My cells/td没有任何输入元素。所以当我在单元格中写入时，文本就在textNode元素中。当我在单元格中写入“test”时，我的单元格是这样的：test