javascript - 如何将图像动态嵌入到表格中？

Question

我对此进行了大量搜索，但没有找到适合我的情况的答案。希望有人能帮忙。

我有一个表单，我希望使用 Javascript 在表单的表格中动态显示图像。

例如，在下面的代码中:

<td class='ee122'>
<img src="images/cnn.JPG">
</td>

我需要根据用户在表单其他地方输入的内容将“cnn”替换为不同的值，替换值基于以下代码:

<input value="" name="XLEW_5_3_6" id="XLEW_5_3_6" type="text" tabindex="-1"  
readonly="readonly" style='overflow:hidden; border:0px solid #000000;
 width:100% ' class='ee102'>

我可以通过连接输入 ID 或其他方式以某种方式将其合并到第一个代码中吗？我只需要动态显示图像。谢谢。

Answer 1

<td class='ee122'>
<img id="tableimage" src="images/cnn.JPG">
</td>

为图片添加id

<input value="" name="XLEW_5_3_6" id="XLEW_5_3_6" type="text" tabindex="-1"  
readonly="readonly" style='overflow:hidden; border:0px solid #000000;
 width:100% ' class='ee102' onchange="changeImage()">

然后创建javascript函数来改变图像

function changeImage(){
    document.getElemtnById('tableimage').setAttribute('src', document.getElemtnById('XLEW_5_3_6').getAttribute('value'));
}

或者你可以使用 jQuery 来更容易实现

$('#XLEW_5_3_6').change(function(){
    $('#tableimage').attr('src', $(this).val());
})