Как динамически встраивать изображения в таблицу?

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'>

Могу ли я каким-то образом включить это в первый код, путем объединения входного идентификатора или другими способами? Мне просто нужно, чтобы изображения отображались динамически. Спасибо.

Answer 1

Хорошо, я решил это после небольшой настройки кода. Ниже приведена справка для тех, у кого похожая проблема:

function changeImage() {
document.getElementById('tableImage').setAttribute('src', document.formc.XLEW_5_3_6.value);
}

Спасибо всем!

Answer 2

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

добавить идентификатор для изображения

<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());
})