Javascript / JQuery Contenteditable 调整大小句柄应设置 table 列宽参数

Question

我正在寻找一种主要由 Webkit 浏览器 (Chrome / Edge / Safari) 支持的解决方案，它允许 table 列在调整 [=35] 大小时更改这些列的实际宽度=] 在 contenteditable 字段中设置。现在这是我到目前为止所做的。

我通过添加以下 CSS（.editortable 是 table 的 class 在列的第一行添加了调整大小句柄s）：

.editortable tr:first-child td {
    padding: 4px;
    cursor:pointer;
    resize:both;
    border: 1px dotted #333;
    overflow:auto;
}

这显示了 contenteditable 字段中的调整大小句柄，允许重新缩放 table 列。但它没有做的是通过添加具有适当值的“宽度”和“高度”属性在基础 HTML 中设置新的宽度和高度。如何在香草 javascript 或 JQuery 中完成？

对不起我的英语，这不是我的母语。我希望你们明白我在这里想要完成的事情。

<div contenteditable="true">
    <table class="editortable">
      <tr>
         <td>1</td><td>Just some text</td>
      </tr>
    </table>
</div>

Answer 1

我认为你需要 MutationObserver，我添加了示例代码来观察秒的变化 td，你可以随意观察任何单元格，每当你调整单元格大小时观察后，回调可以获得最新的widht/height，你可以set/log或根据widht/height和你得到的id进行其他操作

Javascript / JQuery Contenteditable resize handles should set table column width parameter