如何使用jQuery UI实现表格单元格TD的动态调整大小？

嘿，我完全懂你的困扰——现在的代码是在页面加载时直接给固定ID的<td>绑定了resize功能，但新增表格单元格后，这些新元素没被初始化resizable，自然就失效了。这是因为原始代码属于静态绑定，只在页面初次加载时处理当时已存在的元素。

下面我们把逻辑改成动态适配的方式，不管是页面初始元素还是后续新增的单元格，都能正常启用resize功能：

修改后的完整实现 #

HTML部分（包含新增元素的示例场景）

<table> 
  <tr> 
    <td class="resizable-cell" data-handles="e, s">View 1</td> 
    <td class="resizable-cell" data-handles="s">View 2</td> 
  </tr> 
  <tr> 
    <td colspan="2">View 3</td> 
  </tr> 
</table>
<button id="add-new-row">添加新行</button>

JavaScript部分

// 抽离可复用的resize初始化函数
function initResizableCells() {
  const windowWidth = $(window).width();
  const windowHeight = $(window).height();

  // 遍历所有带resizable-cell类的单元格
  $(".resizable-cell").each(function() {
    const $cell = $(this);
    // 先销毁已有的resizable实例，避免重复绑定事件
    if ($cell.data("ui-resizable")) {
      $cell.resizable("destroy");
    }

    // 从data属性读取自定义配置，默认值兜底
    const handles = $cell.data("handles") || "e, s";
    const resizableConfig = {
      minWidth: 50,
      maxWidth: windowWidth - 80,
      maxHeight: windowHeight * 0.83,
      handles: handles
    };

    // 初始化resize并绑定事件逻辑
    $cell.resizable(resizableConfig).on("resize", function() {
      if (handles.includes("e")) {
        // 对应原v1的逻辑：宽度变化时处理相邻单元格高度
        const currentWidth = $cell.width();
        const prevWidth = $cell.data("prev-width") || currentWidth;
        if (prevWidth === currentWidth) {
          $cell.siblings(".resizable-cell").height(0);
        }
        $cell.data("prev-width", currentWidth);
      } else {
        // 对应原v2的逻辑：高度变化时同步设置相邻单元格高度
        $cell.siblings(".resizable-cell").height(0);
      }
    });
  });
}

// 页面加载、窗口resize时初始化
$(window).on("load resize", initResizableCells);

// 新增元素后立即初始化resize功能（示例：点击按钮添加新行）
$("#add-new-row").on("click", function() {
  $("table").append(`
    <tr>
      <td class="resizable-cell" data-handles="e, s">New View 1</td>
      <td class="resizable-cell" data-handles="s">New View 2</td>
    </tr>
  `);
  // 关键：新增元素后调用初始化函数
  initResizableCells();
});

核心修改点说明 #

• 用类选择器替代固定ID：把原来的#v1、#v2改成.resizable-cell类，这样所有新增的单元格只要加上这个类，就能被选中处理。
• 抽离初始化函数：把绑定resize的逻辑封装成独立函数，方便在页面加载、窗口调整、新增元素后重复调用。
• 避免重复绑定：每次初始化前先销毁已有的resizable实例，防止多次绑定导致的事件重复触发问题。
• 用data属性传递配置：通过data-handles给不同单元格指定不同的resize手柄，不用硬编码ID判断，逻辑更灵活。
• 动态元素适配：在新增单元格后立即调用初始化函数，确保新元素也能获得resize功能。

这样修改后，不管后续新增多少表格单元格，只要给它们加上.resizable-cell类并设置对应的data-handles属性，就能自动启用resize功能啦！

内容的提问来源于stack exchange，提问作者fekky Dev