jQuery将文本添加到放置在表格单元格中的图像中

jQuery add Text to an Image placed in a table cell

本文关键字：单元格 表格 图像 文本 添加 jQuery      更新时间：2023-09-26

我有一个简单的表格，比如

<table id="table2" border="1">
        <tr>     
           <td id='id1' style="width:300px">some content</td> 
        </tr>
 </table>

我正在使用jQuery将图像添加到单元格中，如下所示：

$('#id1').append('<img src=images/image1 class=''floatRight'' />');

CSS 风格是这样的：

  img.floatRight { float: right; }

现在，将

图像添加到单元格后，我想添加一些文本，例如" AAA"，在图像顶部，居中对齐，我该怎么做？谢谢

PS：我所说的"在上面"的意思是"叠加"

试试这个 - http://jsfiddle.net/SDtpS/

.floatRight {
    float: right;
    position: relative;
}

.text {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #ddd;
    font: bold 16px sans-serif;
}

.JS

$('#id1').append('<div class="floatRight"><img src="http://lorempixel.com/200/100" /></div>');
$("#id1 div").append('<span class="text">Lorem Ipsum</span>');
相关文章：