删除下拉菜单，并在其中动态添加文本框 <td> 使用jQuery标记

Question

I have a dropdown inside a <td> tag in a table row. I need to change it to a textbox or a textbox+button dynamically depending on some logic. Any help on how I can achieve this?

The whole table containing the <td> 's and <tr> 's along with the controls were generated dynamically.

Thanks in advance.

Answer 1

Take a look at replaceWith jQuery method which replaces each element in the set of matched elements with the provided new content.

Something like this will help you.

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

Answer 2

I'm guessing since this is a <table> you have multiple <td> 's and you're asking how to change the html for that particular <td> with that dropdown box in it? There are many ways to select that element in jQuery but I think you will have the most luck simply specifying an id for that <td> . Since you're creating this dynamically, unique id for that <td> is the easiest way to later refer to the element so you can reset the html in that element. If you have multiple <td> with dropdowns, you could even insert an id (eg 45 in the case below) so you can change just that <td> .

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

Answer 3

You could put a <div id="dynamic"></div> tag inside the <td> and you could use something like:

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

and then:

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