1

1 つのテーブルがヘッダー/列テーブルで、もう 1 つのテーブルがデータを含む特定のインスタンスに 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>
4

1 に答える 1

0

これは完全な例ではありませんが、解決策につながることを願っています。

関数をサイズ変更終了イベント（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);
});
于 2013-03-08T22:21:30.127 に答える