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

标签 javascript jquery html css

我想创建具有合并和调整大小功能的表。这两个功能,看起来就像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高度有限。

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

最佳答案

我假设您已经包含了所需的 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();
  } );

关于javascript - 如何创建具有合并和调整大小功能的表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36469103/

相关文章:

javascript - wc_countries - 状态选择下拉列表 - woocommerce

javascript - 为什么我的汉堡包图标不起作用?

javascript - 如果我在两个选择之间添加一个 div,Javascript 不起作用

java - Thymeleaf 条件 img src

javascript - Span 元素不运行来自 jQuery 的动画

javascript - 复制按钮不适用于 HTML 模板

javascript - 通过 Javascript 更改类的不透明度

javascript - jQuery onload 函数根本不起作用

javascript - 内容编辑器 Web 部件中的 iFrame

html - 如何使用 LAMP 堆栈存储和访问博客内的图像?