0

テーブルがあるとします：

  <table id="table1" border="1">
    <tr>
      <td id='id1'  style="width:200px"></td>
      <td id='id2'  style="width:200px">2222</td> 
    </tr>

  </table>

次のコードを使用して、これらの表のセルに画像を追加しています

$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');

$('#id2').append('<img src=images/image4.jpg />');

今私が達成したい
のはこれです：1.セル「id2」の場合、画像を常に右に揃えて、テキストの隣にならないようにします。
2.セル「id1」の場合、これらの3つの画像のサイズは異なるため（24x24、32x32、24x24）、それらを隣り合わせにしたくありません。私が欲しいのは、そのセルにそれぞれサイズが 32x32 の 3 つの小さなセルがあるかのように、それらの画像をそれらの小さなセルに 1 つずつ入れることです。

HTMLやJavaScriptが苦手です。そうすることは可能ですか？

4

2 に答える 2

0

CSS

#id2 img { float: right; }

HTML

    <table id="table1" border="1">
    <tr>
      <td id='id1'  style="width:200px"><table><tr></tr></table></td>
      <td id='id2'  style="width:200px">2222</td> 
    </tr>
  </table>

Javascript

$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...
于 2012-06-29T18:41:21.670 に答える
0

項目＃2に基づいて、テーブルの定義はまだ終わっていないと思います。#id2 にネストされたテーブルを追加する必要があります (このアプローチのメリットについては後で議論できます)。

だからあなたのテーブルは

<table>
    <tr>
        <td id="id1"></td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td id="id1a"></td>
                    <td id="id1b"></td>
                    <td id="id1c"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

そこから、画像をサブセルに追加します。

于 2012-06-29T18:45:58.457 に答える