how to change id by adding new row..

Question

sam023 0 Junior Poster

14 Years Ago

i am making a table with dynamic increament of rows on click of button..!!

i have used an autocomplete textbox in a row...!!! which is based on textbox id..!!
.
.
as i know that id should be unique.. so how can i change ID then..?

function add(oRow) 
{ 
   var selObj = oRow.getElementsByTagName('select')[0];                
    if(selObj[0].selected){ // Check for empty ledger entry
        alert("Please select ledger");
        return false;
    }          
  oRow.parentNode.replaceChild(oRow.cloneNode(true),oRow.parentNode.insertRow(oRow.rowIndex+1));
 // alert(oRow.rowIndex+1);
  var inpR = oRow.getElementsByTagName('input');
  var inpN = oRow.nextSibling.getElementsByTagName('input');
  var selR = oRow.getElementsByTagName('select')[0];
  //alert(selR);
      selR.disabled=true;
  var selN = oRow.nextSibling.getElementsByTagName('select')[0];
      selN.selectedIndex=0; 
  for(i=0;i<inpR.length;i++)
  { 
    if(inpR[i].disabled){inpR[i].disabled=false;/**/};                      
    if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value='';inpN[i].disabled=false};
    if(inpR[i].value=='Add'){inpR[i].value='Edit';inpN[i].disabled=true};
  } sumus();knockOut(selN);
}

javascript

6 Contributors
22 Replies
179 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by Troy III

All 22 Replies

Airshow 416 WiFi Lounge Lizard

14 Years Ago

Sam,

If you never use document.getElementById on an element (or otherwise need to read its id) then it doesn't need one.

However, if an elememt does need an id, then as you say, it should be unique. One way to ensure uniqueness in a cloned element is to add a suffix, '_n' (where n is an integer). To ensure that "n" is unique, maintain an invisible counter in each of your table rows and increment it each time the row is duplicated.

Before duplicating the row:

var n = oRow.getAttribute('counter');
n = (n===null) ? 0 : n+1;
oRow.setAttribute('counter', n);

Now clone the row, then:

var suffix = '_' + n;
newRow.setAttribute('counter', 0);//Set to 0 in case the cloned row is itelf later cloned.

Now append suffix to all elements in the new row that need it.

New ids will be unique provided that each original id:

is unique
is not of a value that could possibly occur due to the renumbering of another.

Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

can you tell where should i make changes in my code..?

Intriguing I'm sure but this is Sam023's topic.

Airshow

Luckychap 68 Posting Pro in Training

14 Years Ago

If all is working fine then you can use rowIndex as generating id.

function add(oRow) 
{ 
   var selObj = oRow.getElementsByTagName('select')[0];                
    if(selObj[0].selected){ // Check for empty ledger entry
        alert("Please select ledger");
        return false;
    }          
  oRow.parentNode.replaceChild(oRow.cloneNode(true),oRow.parentNode.insertRow(oRow.rowIndex+1));
  var inpR = oRow.getElementsByTagName('input');
  var inpN = oRow.nextSibling.getElementsByTagName('input');
  // Setting id
  inpN.id = 'textBox_' + oRow.rowIndex+1;
  var selR = oRow.getElementsByTagName('select')[0];
      selR.disabled=true;
  var selN = oRow.nextSibling.getElementsByTagName('select')[0];
      selN.selectedIndex=0; 
  for(i=0;i<inpR.length;i++)
  { 
    if(inpR[i].disabled){inpR[i].disabled=false;/**/};                      
    if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value='';inpN[i].disabled=false};
    if(inpR[i].value=='Add'){inpR[i].value='Edit';inpN[i].disabled=true};
  } sumus();knockOut(selN);
}

Airshow 416 WiFi Lounge Lizard

14 Years Ago

If all is working fine then you can use rowIndex as generating id.

That's fine the first time a row is cloned but on a second cloning of the same row, would it not generate an identical id to the first?

That's why I advocate maintaining a counter.

Airshow

Luckychap 68 Posting Pro in Training

14 Years Ago

inpN.id = 'textBox_' + oRow.rowIndex+1;
.
.
this code doesnt showing or creating any ID.. :O

Sorry for typo it must be:

inpR.id = 'textBox_' + oRow.rowIndex+1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sam023 0 Junior Poster · Answer 1 · 2009-08-10T14:24:45+00:00

i hope people understood here what exactly i want to say..!! :O

nish123 0 Junior Poster in Training · Answer 2 · 2009-08-11T13:44:35+00:00

can you tell where should i make changes in my code..?

nish123 0 Junior Poster in Training · Answer 3 · 2009-08-11T13:50:47+00:00

actually i dont want to use ID...!! major reason is that i m also using a delete button which will delete the row..!!
.
.
this mean that again there can be same Id which will create problem..!! :(

nish123 0 Junior Poster in Training · Answer 4 · 2009-08-11T15:54:17+00:00

function add(oRow) 
{ 
   var selObj = oRow.getElementsByTagName('select')[0];                
    if(selObj[0].selected){ // Check for empty ledger entry
        alert("Please select ledger");
        return false;
    }          
oRow.parentNode.replaceChild(oRow.cloneNode(true),oRow
.parentNode.insertRow(oRow.rowIndex+1));
  var inpR = oRow.getElementsByTagName('input');
  var inpN = oRow.nextSibling.getElementsByTagName('input');
  var selR = oRow.getElementsByTagName('select')[0];
  //alert(selR);
      selR.disabled=true;
  var selN = oRow.nextSibling.getElementsByTagName('select')[0];
      selN.selectedIndex=0; 
  for(i=0;i<inpR.length;i++)
  { 
    if(inpR[i].disabled){inpR[i].disabled=false;/**/};                      
    if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value='';inpN[i].disabled=false};
    if(inpR[i].value=='Add'){inpR[i].value='Edit';inpN[i].disabled=true}; 
  } sumus();knockOut(selN);
}

i have a code for autocomplete in one of the textbox in a row.. but for that i need ID..!!

but because of clone i m unable to enter different id..!! where should i maker change in my javascript..!!

polo_coins -2 Junior Poster in Training · Answer 5 · 2009-08-11T16:41:44+00:00

I don"t think change ID is a good Idea because in a future you may use they "id" in another cases

sam023 0 Junior Poster · Answer 6 · 2009-08-11T18:27:29+00:00

Intriguing I'm sure but this is Sam023's topic.
Airshow

Yes it is my topic but i can see that nish123 facing the same problem..!! and he also using same code as i do..!!!

so kindly help me out..!! where should i make changes..? in the code to create different id...!!

sam023 0 Junior Poster · Answer 7 · 2009-08-11T18:30:57+00:00

I don"t think change ID is a good Idea because in a future you may use they "id" in another cases

well i have no other option except changing ID..!!

as my auto complete function is based on id and ID must be unique..!!
.
.
as the user append the row... the clonenode function create exactly the same row as above including ID..!!! and that thing will create problem...!!!
.
.
can anyone suggest an auto complete function where ID is not required..?

sam023 0 Junior Poster · Answer 8 · 2009-08-11T23:20:53+00:00

inpN.id = 'textBox_' + oRow.rowIndex+1;

.
.
this code doesnt showing or creating any ID.. :O

Luckychap 68 Posting Pro in Training · Answer 9 · 2009-08-11T23:41:20+00:00

That's fine the first time a row is cloned but on a second cloning of the same row, would it not generate an identical id to the first?
That's why I advocate maintaining a counter.
Airshow

Well if rowIndex is same always, then inpN.length can be used to set ids:

inpR.id = 'textBox_' + inpN.length + 1;

If this does not work, you have to use some sort of counter as suggested by Airshow.

sam023 0 Junior Poster · Answer 10 · 2009-08-17T12:01:03+00:00

none of the code is working..
.
.
can anybody tell how to use counter..? :O

Troy III 272 Posting Pro · Answer 11 · 2009-08-17T12:28:30+00:00

Troy III 272 Posting Pro

14 Years Ago

... + i++

sam023 0 Junior Poster · Answer 12 · 2009-08-17T12:58:29+00:00

sam023 0 Junior Poster

14 Years Ago

didnt get u.. :O
be more specific.. :)
thank you

nish123 0 Junior Poster in Training · Answer 13 · 2009-08-17T14:43:33+00:00

I dont think it is possible to change Id.. by using CloneNode...!!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 14 · 2009-08-17T15:34:02+00:00

Sam023,

Nish is right, CloneNode doesn't have an option for changing ID(s).

Have you tried the idea in my post #3 of this topic? It outlines a way (certainly not the only way) maintain a counter by which cloned elements can be force-renumbered for uniqueness.

Airshow

sam023 0 Junior Poster · Answer 15 · 2009-08-17T16:31:24+00:00

Sam023,
Nish is right, CloneNode doesn't have an option for changing ID(s).
Have you tried the idea in my post #3 of this topic? It outlines a way (certainly not the only way) maintain a counter by which cloned elements can be force-renumbered for uniqueness.
Airshow

Thats what i m asking how to maintain counters.?? U can see my code..
kindly guide me little..where should i make changes..!!!
.
.
and one more thing i need to change id because there is a textbox in a row where i have put autocomplete and for which ID is MUST..!!!
.
.

Thank You.. :)

sam023 0 Junior Poster · Answer 16 · 2009-08-18T11:34:50+00:00

I think i got the solution..!!
we can change id even in CloneNode.>!! :)
.
.
Thanks to everyone who response to this thread..!! :)

Troy III 272 Posting Pro · Answer 17 · 2009-08-19T15:33:23+00:00

I think i got the solution..!!
we can change id even in CloneNode.>!! :)
.
.
Thanks to everyone who response to this thread..!! :)

Of course you can. :') -good luck with your further codding.
Glad you solved it.

how to change id by adding new row..

Recommended Answers Collapse Answers

All 22 Replies

Recommended Answers