jQuery:图像在HTML表格中的位置

jQuery: Position of Images inside a HTML Table

本文关键字：位置 表格 HTML 图像 jQuery      更新时间：2023-09-26

假设我有一个表：

  <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。 可以这样做吗？

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>

爪哇语

$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...

基于项目 #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>

从那里，您可以将图像附加到子单元格中。

相关文章：