javascript - 如何创建具有合并和调整大小功能的表？

Question

我想创建具有合并和调整大小功能的表。这两个功能，看起来就像google spreadsheets

首先，我通过Javascript库找到了合并功能

之后，使用这段代码调整 TD 的大小 $('td').resizable(); 但是出了点问题。

此表在运行调整大小功能后完成合并。

<table id="BA1"><caption></caption><thead></thead><tbody><tr><td><div class="iitem">+</div></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td colspan="1"rowspan="2"></td></tr><tr><td colspan="4"rowspan="2"></td></tr><tr><td colspan="1"rowspan="2"></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>

操作非常方便，合并后的TD高度有限。

不知道为什么？有没有更好的办法？

Answer 1

我假设您已经包含了所需的 JQuery UI 和 CSS 库，例如:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

最好，您还需要调用您的 resizable，如下所示。

$( function() {
    $('td').resizable();
  } );