Example:

<table id ='table'>
<tr>
<td>1</td>
<td><select id='old' name='old'></select></td>
<td><select id='old2' name='old2'></select></td>
<td><div id='old3' name='old3'></div></td>
</tr>
</table>

How to change the value of id or name from select id ='old' to select id ='new' (for example) after deleting rows in javascript? I have been trying all the methods like trying getElementById('old') = 'new' but not work, used replaceChild also not work (or maybe I put the wrong code, no idea). Do you have other alternatives? (No JQuery, please).

Thanks.

Example:

<table id ='table'>
<tr>
<td>1</td>
<td><select id='old' name='old'></select></td>
<td><select id='old2' name='old2'></select></td>
<td><div id='old3' name='old3'></div></td>
</tr>
</table>

How to change the value of id or name from select id ='old' to select id ='new' (for example) after deleting rows in javascript? I have been trying all the methods like trying getElementById('old') = 'new' but not work, used replaceChild also not work (or maybe I put the wrong code, no idea). Do you have other alternatives? (No JQuery, please).

Thanks.

• javascript

• you don't mention whether the numbering of other rows should change – ninjagecko Commented Feb 29, 2012 at 4:30
• @ninjagecko Oh yeah the other rows should change too, same as the example I gave, if old2 change to new2, old3 to new3 so on. – candies Commented Feb 29, 2012 at 6:13
• @KitHo Just want to know and learn this with Javascript (it doesn't mean I don't like JQuery or don't want to use/learn), besides I have used Javascript already, if I change to JQuery I will confuse :D. – candies Commented Feb 29, 2012 at 6:14

4 Answers 4

You can use the setAttribute method to acplish this

document.getElementById("old").setAttribute("id","new");
document.getElementById("new").setAttribute("name","new");

var sel = document.getElementById("old");  //Reference the element
sel.id = "new";  //set the id

try this :

 document.getElementById("old").name = 'NewName';
 alert(document.getElementById("old").name);
 document.getElementById("old").id = 'Newid';
 alert(document.getElementById("Newid").id);

its work for me.

I feel there is something inelegant going on here; if you told us more we'd be able to say the "right way" to do it. If you nevertheless have a very good reason to do what you're doing, merely call this snippet of code you have made all your changes. It will update all the elements in your rows to have the correct numbering.

var formElements = document.getElementById('table').getElementsByClassName('toUpdate');
for (var i=0; i<formElements.length; i++) {
    var e = formElements[i];
    e.id = 'new'+i;
}

There are quite a few variations on this if you didn't want to add a class="toUpdate ..." to each one. For example you were using regular form elements, you could iterate over the <form>'s elements. Or you could iterate through all the elements and pattern-match on the names or ids. Or if you are algorithmically generating this with javascript you could add each element to an array at the same time you add it to the DOM, for later use (like this update).