單擊td后將img添加到td

Question

我有一張表，其中有一行，一個單元格，上面有一個文本。 文本在td的中心。

在單擊td的同時，我想在文本后添加圖像。 我不希望文本被移動，但是會留在原處。

這是我的jsfiddle：

http://jsfiddle.net/alonshmiel/L7qn3/1/

在此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