0

水平に配置されたさまざまなテーブルの行を揃える必要があります。htmlコードを単一のWebユーザーコントロールに配置して、そのコントロールのインスタンスを必要な数だけ作成し、それらを水平方向にレイアウトできるようにしたいと思います。問題は、行のテキストを折り返す必要があることです。したがって、一部の行は垂直方向に拡張され、一部は拡張されない場合があります（以下の例を参照）。その場合、他のテーブルの行は水平方向に配置されません。単一のテーブルを使用してこれらすべてを達成できることはわかっていますが、ユーザーコントロールの新しいインスタンスを動的に作成するのではなく、名前、住所、電話のHTMLコードを複製する必要があります（実際には、より多くのフィールドがあります）これですが、私はそれを単純にしています）。div、テーブル、または他の何かを使用してこれを行う方法はありますか？

問題は次のとおりです。メアリージェーンのアドレスフィールドが2行拡張され、電話フィールドがジョンとボブの電話フィールドと適切に位置合わせされなくなります。

名前：John Doe名前：Mary Jane名前：Bob Smith
住所：123ブロードウェイ住所：いくつかの本当に長い住所住所：短い住所
電話：複数回線を使用する123-456電話：111-2222
                          電話番号：456-789

これを行う方法は（asp.netを使用する以外は）制限されていませんが、設計時にX回（この例では3回）インスタンス化する単一のWebコントロールを使用することをお勧めします。VS2008と.Net3.5を使用しています

4

2 に答える 2

0

データをレンダリングしてから、クライアント側でjavascript（jQueryをお願いします）を使用してすべてのtd.address（たとえば）セルを見つけ、最も高いセルを見つけ、他のすべてのセルの高さをそれに設定します。他のフィールドについて言及しているので、ロジックはもう少し複雑かもしれませんが、原則は有効です。

いくつかの簡単なコード：

<script type="text/javascript">
  $(function() {
    var cells = $('td.address');
    var height;

    // some code to foreach on all relevant cells to find max size

     cells.each(function(index) {
       $(this).height(height));
    });
  });
</script>
于 2010-05-13T17:02:53.020 に答える
0

誰もが知っているように、これは可能です。私はjqueryを使用してソリューションを終了しましたが、それはかなりうまく機能します。各テーブルに特定のcssクラスを割り当て、それを使用して、サイズを変更する必要があるテーブルを識別しました（各テーブルは一意である必要があるため、IDを使用しないでください）。それは4つの主要なブラウザで動作します。IE7の場合、これが機能するように、空のセルにスペースを追加してください。これがJavascriptです：

function ResizeTableRows() {
    // select tables by css class name using jquery
    var tables = $('.myCssClassName');

    // all tables should have the save number of rows, so just use the first one
    var totalRows = tables[0].rows.length;

    for (var rowNumber = 0; rowNumber < totalRows; rowNumber++) {
        var maxRowHeight = GetMaxRowHeight(tables, rowNumber);

        for (var i = 0; i < tables.length; i++) {
            if (maxRowHeight > 0) {
                tables[i].rows[rowNumber].height = maxRowHeight;
                SetCellHeight(tables[i].rows[rowNumber].cells, maxRowHeight);
            }
        }
    }
}

function GetMaxRowHeight(tables, rowNumber) {
    var maxRowHeight = 0;

    for (var i = 0; i < tables.length; i++) {
        var row1 = tables[i].rows[rowNumber];
        var cell1 = row1.cells[0];
        var rowHeight = row1.clientHeight;

        if (rowHeight <= 0) {
            rowHeight = row1.height;
        }        
        if (rowHeight <= 0) {
            rowHeight = cell1.clientHeight;
        }        

        if (rowHeight > maxRowHeight) {
            maxRowHeight = rowHeight;
        }
    }
    return maxRowHeight;
}

function SetCellHeight(cells, maxRowHeight) {
    for (var i = 0; i < cells.length; i++) {
        cells[i].height = maxRowHeight;
    }
}

プロセスを開始するためのコードは次のとおりです。Webコントロールではなく、メインページに追加します（.netを使用している場合）

<script type="text/javascript">
    // runs automatically after this page has been loaded and rendered
    $(document).ready(function() {
        ResizeTableRows();
    });
</script>
于 2010-07-08T23:54:55.617 に答える