一次将 jQuery Resizable 附加到 2 个表,以便调整同一列的大小

Posted

技术标签:

【中文标题】一次将 jQuery Resizable 附加到 2 个表,以便调整同一列的大小【英文标题】:attach jQuery Resizable to 2 tables at once, so that the same column gets resized 【发布时间】:2013-02-24 10:17:03 【问题描述】:

如何在特定实例中应用 jQuery,其中有两个表,一个表是标题/列表,另一个表包含数据。例如,如果我要调整标题表中的列的大小,那么包含数据的另一个表中的列也会被调整大小吗?

可以这样做还是会被视为“超出范围”

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Table Scroll with Fixed Header</title>
</head>
<body>

<table style="width: 300px" cellpadding="0" cellspacing="0" bgcolor="#c0c0c0">
<tr>
  <td style="width: 150px">Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 150px">Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>
</body>
</html>

【问题讨论】:

【参考方案1】:

这不是完整的示例,但我希望它能引导您找到解决方案。

您需要将函数绑定到 resize end 事件 (jQuery API doc),并且在回调中您可以获取当前项的宽度并将其应用到其他表格列。

$( ".selector" ).bind( "resize", function(event, ui) 
   // TODO: you need to check index of the resized column and store it
   var width = $(ui).width();
   // TODO: find nth column from the other table and set it's width to be exactly same as
   // table 1
   $(".other-table-selector").width(width);
);

【讨论】:

以上是关于一次将 jQuery Resizable 附加到 2 个表,以便调整同一列的大小的主要内容,如果未能解决你的问题,请参考以下文章

使用 JQuery 一次将 JSON 数据传递到 div

仅附加 4 个 div,其余 div 在另一部分中

Jquery ui拖放+ .resizable

一次将多个图像上传到 Firebase

jQuery:可在 Resizable Droppable 上拖动:项目在放置后消失

为啥Android系统一次又一次将相同的内容绘制到画布上