Remove dropdown and add a textbox dynamically inside a <td> tag using 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.

Could you give us a code example of what you're trying to do. This would be helpful in understanding where you are and allow us to help you further from there. — mason81
– mason81, Commented Feb 15, 2012 at 15:19
Well, I will explain it a bit more. Each row has four <td> tags with each having a dropdown control inside it. There are multiple rows in the same fashion. Now for every row, the dropdown in the fourth <td> tag needs to be changed to a textbox or textbox+button depending on some logic with the dropdown in the first <td> tag. I hope I am able to make this question clear? — Anupam
– Anupam, Commented Feb 15, 2012 at 15:42

ShankarSangoli · Accepted Answer · 2012-02-15 15:22:31Z

2

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" />');

answered Feb 15, 2012 at 15:22

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

O.O Over a year ago

This would probably work, but what if the OP wants it back again? Probably be better to toggle?

ShankarSangoli Over a year ago

@subt13 - That is not mentioned in the question otherwise I would have taken care of that. If you think that way there will be many "what if's?" from OP's point of view.

O.O Over a year ago

you are right, the OP's question is not worth answering, because it is really not clear what the OP wants. Basically, all the answers are assuming what the OP wants. I just thought it might improve your answer to add that.

Anupam Over a year ago

This will replace all the select controls in the html page with textboxes, right? That is not my objective.

ShankarSangoli Over a year ago

@user1209323 - If I knew your markup structure I would have used the right selectors as per your need. If you know which td select element needs to replace then use the right selector. I have shown you a way without even knowing your markup.

|

Jinyoung Kim · Accepted Answer · 2012-02-15 15:38:31Z

1

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 (e.g. 45 in the case below) so you can change just that <td>.

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

answered Feb 15, 2012 at 15:38

Jinyoung Kim

2,21121 silver badges32 bronze badges

5 Comments

Anupam Over a year ago

You're right! I indeed did add an id for each <tr> tag because I felt I needed it and would come handy! I'll go ahead and add an id for each <td> tag as you instructed! That would make my job a lot easier!

Jinyoung Kim Over a year ago

Hold on, if you have an id for the tr, then just use that. Something like $("tr_45 td:nth-child(2)").html(... See: api.jquery.com/nth-child-selector. Also, seems like you're kinda new, please participate in SO and vote up answers and accept if you like the answer.

Anupam Over a year ago

So as per your first answer, I can use this : $('#tdwithdropdown_45').html('<input ...>'); Inside the .html(....) section I just add <input type="text"> etc and this should work, right? What if I wanted to add two controls like say a textbox and a button in the same <td>?

Jinyoung Kim Over a year ago

You can put as much html in there as you like. $('#tdwithdropdown_45').html('<input type="text"><input type="button">');

Anupam Over a year ago

I tried this, but doesn't seem to work. Here's the code that I am using : var temptxtbox = "<input type=\"text\" id=\"" + tempnum[0].toString() + ".txtbox\""; var tempattrval = tempnum[0].toString(); tempattrval = tempattrval + ".4.tcol"; $(tempattrval).html(temptxtbox);

karim79 · Accepted Answer · 2012-02-15 15:25:04Z

0

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' />";

edited Feb 15, 2012 at 15:25

karim79

343k67 gold badges420 silver badges409 bronze badges

answered Feb 15, 2012 at 15:23

karan k

9772 gold badges22 silver badges47 bronze badges

1 Comment

Anupam Over a year ago

This one works for me perfectly!!! Thanks a lot! I used the <td> id in place of "dynamic" and it works like a charm!

Collectives™ on Stack Overflow

Remove dropdown and add a textbox dynamically inside a <td> tag using jQuery

3 Answers 3

6 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related