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

Question

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

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

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

Answer 1

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

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

, а затем:

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

Answer 2

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

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

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

Answer 3

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