copy select element in a table

Question

I have a dynamic table where I add rows dynamically when the user clicks a button.

My button call the following function :

<input type="button" value="Add" onclick="addRowTuy($('#AmonttableTuy tbody'), 'AmontTuy');" />

My function adds a new rows to my table. It include text fields, inputs and select.

I have no problem for the creation of new inputs and text, but for the select, I want copy an existing select and change its id. That's my problem.

This is the function where I create a new rows in my table:

function addRowTuy(table, value)
{
var nbrow = table.children().size();
    table.append( "<tr>"+
    "<td>"+(nbrow+1)+"</td>"+
    "<td><input id='"+value+(nbrow+1)+"Diam"+"'/></td>"+
    "<td><input id='"+value+(nbrow+1)+"Long"+"'/></td>"+
    "<td>"+$("#AmontTuy1Type")+"</td>"+ //This is where I want copy the select element
    "<td><input id='"+value+(nbrow+1)+"Rugo"+"'/></td>"+
"</tr>");
}

Have you an idea on the way to do this?

I have looked at .clone and tried, but I didn't success when I use it — Etienne, Oct 23 '14 at 08:51

artm · Accepted Answer · 2014-10-23T09:13:37.290

2

Something like this should work

"<td>"+$("#AmontTuy1Type").clone().attr('id', 'newID').html() +

You need to clone and add its html to your string, not the element itself. Or create a td element and append the clone to it.

Update:

Yeah, you're right, html() only takes the options, not the select itself. Try this:

"<td>"+"<select id='newID'>" + $("#AmontTuy1Type").html() + "</select>" +

edited Oct 23 '14 at 09:13

answered Oct 23 '14 at 08:53

artm

8,554
3
26
43

this copy only the option of the select and not all the select. It is strange because "AmontTuy1Type" is the id of the select – Etienne Oct 23 '14 at 08:56

score 1 · Answer 2 · edited May 23 '17 at 12:06

1

There are different ways to do this. Below links will be helpful for you.

How to add (clone) form fields using jQuery and increment ids and names

jquery clone form fields and increment id

edited May 23 '17 at 12:06

Community

1
1

answered Oct 23 '14 at 08:55

KiV

2,225
16
18

score 0 · Answer 3 · answered Oct 23 '14 at 09:05

0

I have done it like this

$("#AmontTuy1Type").parent().clone().attr('id', 'newID').html()

It copy the select well, but the id of this one doesn't change?

answered Oct 23 '14 at 09:05

Etienne

408
2
9
28

copy select element in a table

3 Answers3