49

W3 Schoolsのこの記事によると、次のような HTML で基本的なテーブルを作成できます。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

上記から、行ごとにデータを入力しているように見えます。

すべてのデータを列ごとに入力する必要がある状況があります。このようなことは可能ですか？

<table border="1">
    <tc>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tc>
    <tc>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tc>
</table>
4

6 に答える 6

24

テーブル内のテーブルを使用して、テーブルを列にレンダリングできます...

<table>
<tr>
<td>
    <table>
        <thead>
            <tr>
                <td>column 1 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 1 row 1</td>
            </tr>
            <tr>
                <td>column 1 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
<td>
    <table>
        <thead>
            <tr>
                <td>column 2 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 2 row 1</td>
            </tr>
            <tr>
                <td>column 2 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
</tr>
</table>
于 2015-12-17T11:39:57.607 に答える
19

テーブルを行ごとにレンダリングしてから、javascript を使用してテーブルを反転することをお勧めします。

http://jsfiddle.net/CsgK9/2/

次のコードは、テーブルを反転します (このサンプル コードは jquery を使用します)。


    $("table").each(function() {
        var $this = $(this);
        var newrows = [];

        $this.find("tr").each(function(){
            var i = 0;

            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $(""); }
                newrows[i].append($(this));
            });
        });

        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

アップデート：

これは要素でも動作するバージョンです: http://jsfiddle.net/zwdLj/

于 2013-04-21T01:19:19.450 に答える