Question

我有一个有一行的表，有一个单元格，有一个文本。文本位于td的中心。

单击td时，我想在文本后添加图像。我不希望文本被移动，但会留在同一个地方。

这是我的jsfiddle：

在这个jsfiddle中，文字向左移动。

<table>
    <tr>
        <td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
            sfh
        </td>
    </tr>
</table>

谢谢大家！

Answer 1

您需要在表之前放置脚本标记，否则浏览器无法找到该函数，因为事后声明了函数。这是工作示例FIDDLE

<script>
    function func(elem) {
    elem.innerHTML += "<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAQABADASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAQMEBf/EACQQAAEDBAEDBQAAAAAAAAAAAAECAwQFERIhABQiQRNCUWGR/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAfEQEAAgEEAwEAAAAAAAAAAAABAxECACExQRITMlH/2gAMAwEAAhEDEQA/AN5ymSaWUmTSXZkhBbV0rSgSpJJuTYK0Mdj75fVYMZ9TcRlKDLDTq0qjxgEOY37dW3dCvBvccEOXGrMNmFPkNR32UlZmvLClObPZux93z44qfVKUoejFjP8ARpxcS0X8SlwZbF8tEKH5xskGUkmOZnSdUVXfe69fmoGM5HF6iOxfpcvJbsONjHhTZs5Nf//Z'>"
}
</script>
<table>
    <tr>
        <td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
            sfh
        </td>
    </tr>
</table>

Answer 2

这样做的唯一方法是给文本一个固定的边距而不是居中。这样，当添加新内容时，文本将保持居中。

<td style="border:1px solid red; width:100px;" onclick="func(this);">
    <span style="margin-left:38px;">sfh</span>
</td>

以下是示例JSFiddle

单击td后将图像添加到td

2 个答案: