Удалите выпадающий список и динамически добавьте текстовое поле внутри тега <td>, используя jQuery.

Question

У меня есть выпадающий список внутри тега <td> в строке таблицы.Мне нужно изменить его на текстовое поле или текстовое поле + кнопку динамически в зависимости от некоторой логики.Любая помощь о том, как я могу достичь этого?

Вся таблица, содержащая <td> и <tr> вместе с элементами управления, была сгенерирована динамически.

Заранее спасибо.

Answer 1

Взгляните на replaceWith метод jQuery, который заменяет каждый элемент в наборе соответствующих элементов предоставленным новым содержимым.

Нечто подобное поможет вам.

$('table td select').replaceWith('<input type="text" />');

Answer 2

Я полагаю, поскольку это <table>, у вас есть несколько <td>, и вы спрашиваете, как изменить HTML для этого конкретного <td> с этим выпадающим списком?Есть много способов выбрать этот элемент в jQuery , но я думаю, что вам больше всего повезет, просто указав идентификатор для <td>.Поскольку вы создаете это динамически, уникальный идентификатор для этого <td> - это самый простой способ позже обратиться к элементу, чтобы вы могли сбросить html в этом элементе.Если у вас есть несколько <td> с выпадающими списками, вы можете даже вставить идентификатор (например, 45 в случае ниже), чтобы вы могли изменить только это <td>.

$('#tdwithdropdown_45').html('<input ...>');

Answer 3

Вы можете поместить тег <div id="dynamic"></div> в <td> и использовать что-то вроде:

document.getElementById("dynamic").innerHTML=""; 

и затем:

document.getElementById("dynamic").innerHTML="<input type='text' />";