Search jQuery

jQuery Forum

Getting Started

Timur

Changing attributes of clonned html table and radiobutton

in Getting Started • 11 years ago

Hi,
I'm new with JavaScript and jQuery. I clonned below html table with this jQuery script:

$("#table1").clone().appendTo("#div1");

<div id="div1">
<table border="1" id="table1">
<tr>
<td colspan="5">Question text will be here</td>
</tr>
<tr>
<td><input type="radio" id="A" name="ans" />answer1 <br /></td>
<td><input type="radio" id="B" name="ans" />answer2 <br /></td>
<td><input type="radio" id="C" name="ans" />answer3 <br /></td>
<td><input type="radio" id="D" name="ans" />answer4 <br /></td>
<td><input type="radio" id="E" name="ans" />answer5 <br /></td>
</tr>
</table>
<table border="1" id="table1">
<tr>
<td colspan="5">Question text will be here</td>
</tr>
<tr>
<td><input type="radio" id="A" name="ans" />answer1 <br /></td>
<td><input type="radio" id="B" name="ans" />answer2 <br /></td>
<td><input type="radio" id="C" name="ans" />answer3 <br /></td>
<td><input type="radio" id="D" name="ans" />answer4 <br /></td>
<td><input type="radio" id="E" name="ans" />answer5 <br /></td>
</tr>
</table>
</div>

And now, I'm trying to is, changing id of clonned tables and clonned radiobuttons. I need to change clonned tables id properties, otherwise i can't select them on following steps of my project. And i also need to change name property of all radiobuttons, because i can only select one radiobutton on browser when it's like this.

I've read the documentation about the .attr() api over this page: http://api.jquery.com/attr/ . So I know how to change the attributes of an html element with jQuery, but i don't know, how to change these attributes of clonned html elements dynamically.

Can you help me with this please?

Replies(4)

charlietfl

Re: Changing attributes of clonned html table and radiobutton

11 years ago

it is generally easier to use class instead of ID when you have repeating elements and saves having to modify ID's and helps keep code simpler for working with the repeating elements

You can then use the outer element such as "div1" as context to run code so code knows which part of page is being targeted

As for original question you can temporarily store the clone in a jquery object variable so you don't have repeating ID's in page since ID's must be unique

var $table=$('#table1').clone().attr('id','newTableID');

$table.find(':radio').each(function(){

var id=$( this ).attr('id') +'?'// do something with ID;

$(this).attr('id', id)

})

$('#div1').append( $table)

Timur

Re: Changing attributes of clonned html table and radiobutton

11 years ago

Hi,

I did the first part which is abıut the changing clonned table's id before checking here.

But i didn't understand inside of the loop.

$table.find(':radio').each(function(){
var id=$( this ).attr('id') +'?'// do something with ID;
$(this).attr('id', id)
})

i wanted to change "name" attribute of all radiobuttons over each clonned table dynamically. For instance; i mean when i first clonned a table, radiobuttons' names should be "radio2". next clonning radio3, next radio4..

charlietfl