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），我不希望它们彼此相邻。我想要的是，好像那个单元格中有 3 个小单元格，每个单元格的大小为 32x32，并将这些图像一一放入这些小单元格中。

我不擅长 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 回答