By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,097 Members | 770 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,097 IT Pros & Developers. It's quick & easy.

Adding javasript property to a cell in dynamically added rows.

P: 10
Hi.. i am new to javascripts,

i am using a addRow scipt to add rows to a table dynamically.

one of the cells(say cell2) in a Nth row needs to be hyperlinked to another script.

for example:
Expand|Select|Wrap|Line Numbers
  1. function addRow() // the add row script
  2. {
  3.     var tbl=document.getElementById("table");
  4.     var numRows=tbl.rows.length;
  5.     var newRow=tbl.insertRow(numRows);
  6.  
  7.      //IDs
  8.     var secondCell=newRow.insertCell(2);
  9.     var box2=document.createElement('TD');
  10.     //textbox
  11.     var txtInp2=document.createElement('input');
  12.     txtInp2.name="IDs";
  13.     txtInp2.type='text';
  14.     txtInp2.value="";
  15.     //image
  16.     var link2=document.createElement('<a href="#"onClick="javascript:Popup(this)">');
  17.  
  18. var image2=document.createElement('<IMG align=middle border=0 src='find.gif'>');
  19.     link2.appendChild(image2);
  20.     box2.appendChild(txtInp2);
  21.     box2.appendChild(link2);
  22.     secondCell.appendChild(box2);
  23.  
  24. // i am appending image to link , txtInp2 and link to the box, and box2 to //secondCell.
  25. }
  26. function Popup(obj)
  27.     {
  28.         currentRowIndex = obj.parentElement.parentElement.rowIndex;
  29.         obj = document.form.IDs;
  30.         if(obj.length != null)
  31.         {
  32.             window.Id=document.form.IDs(currentRowIndex-1);
  33.         }
  34.         else
  35.         {
  36.             window.Id=obj;
  37.         }
  38.  
  39.         var urlString = <something>;
  40.         image=window.open(urlString,"width=480,height=230,status");
  41.         image.focus();
  42.     }
  43.  
My problem is, if the table is already defined(if href to PopUp() specified in first row of table,declared in HTML, then link to PopUp(obj) is working , but if i add rows to the table dynamically using addRow(), the links to PopUp() in the new rows added are not working,
it gives a error msg telling either "object expected" or "parentElement.parentElement" ,or "length is null or not an object"

I dont know how to specify the 'this' in
var link2=document.createElement('<a href="#"onClick="javascript:Popup(this)">');

PLZ help...!
Aug 23 '07 #1
Share this Question
Share on Google+
18 Replies

epots9
Expert 100+
P: 1,351
Hi.. i am new to javascripts,

i am using a addRow scipt to add rows to a table dynamically.

one of the cells(say cell2) in a Nth row needs to be hyperlinked to another script.

for example:

function addRow() // the add row script
{
var tbl=document.getElementById("table");
var numRows=tbl.rows.length;
var newRow=tbl.insertRow(numRows);

//IDs
var secondCell=newRow.insertCell(2);
var box2=document.createElement('TD');
//textbox
var txtInp2=document.createElement('input');
txtInp2.name="IDs";
txtInp2.type='text';
txtInp2.value="";
//image
var link2=document.createElement('<a href="#"onClick="javascript:Popup(this)">');

var image2=document.createElement('<IMG align=middle border=0 src='find.gif'>');
link2.appendChild(image2);
box2.appendChild(txtInp2);
box2.appendChild(link2);
secondCell.appendChild(box2);

// i am appending image to link , txtInp2 and link to the box, and box2 to //secondCell.
}
function Popup(obj)
{
currentRowIndex = obj.parentElement.parentElement.rowIndex;
obj = document.form.IDs;
if(obj.length != null)
{
window.Id=document.form.IDs(currentRowIndex-1);
}
else
{
window.Id=obj;
}

var urlString = <something>;
image=window.open(urlString,"width=480,height=230, status");
image.focus();
}

My problem is, if the table is already defined(if href to PopUp() specified in first row of table,declared in HTML, then link to PopUp(obj) is working , but if i add rows to the table dynamically using addRow(), the links to PopUp() in the new rows added are not working,
it gives a error msg telling either "object expected" or "parentElement.parentElement" ,or "length is null or not an object"

I dont know how to specify the 'this' in
var link2=document.createElement('<a href="#"onClick="javascript:Popup(this)">');

PLZ help...!
try this:
Expand|Select|Wrap|Line Numbers
  1. var link2=document.createElement('a');
  2. link2.href = "#";
  3. link2.onclick = function(){Popup(this);};
  4.  
try that out and tell us how it goes,
good luck
Aug 23 '07 #2

pbmods
Expert 5K+
P: 5,821
Heya, Sandeep. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.
Aug 23 '07 #3

P: 10
sorry..I tried what u suggested, but it is not working.

My full code with form element goes like this,might be there is some error in these too.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script>
  3. function(addRow)
  4. {
  5.     var tbl=document.getElementById("table");
  6.     var newRow=tbl.insertRow(tbl.rows.length);
  7.  
  8.     <note>0th and 1st cell added,which are textboxes<note>
  9.  
  10.     var secondCell=newRow.insertCell(2);
  11.     var txtInp2=document.createElement('input');
  12.     txtInp2.name="ids"; //setting name to newly added cell.
  13.     txtInp2.type='text';
  14.     txtInp2.value="";
  15.  
  16.      var link2=document.createElement('a');
  17.      link2.href = "#";
  18.      link2.onclick = function(){Popup(this);};
  19.      link2.value=click;
  20.      secondCell.appendChild(txtInp2);
  21.      secondCell.appendChild(link2);
  22.     tbl.appendChild(newRow);
  23. }
  24. function PopUp(obj)
  25. {
  26. currentRowIndex = obj.parentElement.parentElement.rowIndex;
  27.  
  28.         obj = document.form.ids;
  29.         if(obj.length != null)// <NOTE> im getting an error here saying obj.length is null or not an object.<NOTE>
  30.         {
  31.             window.id=document.form.ids(currentRowIndex-1);
  32.         }
  33.         else
  34.         {
  35.             window.id=obj;
  36.         }
  37.  
  38.         urlString = "\findId.jsp";
  39.         newWindow=window.open(urlString,'find',"width=480,height=230");
  40.         newWindow.focus();
  41. }
  42. </script>
  43.  
and the FORM element goes like this..
Expand|Select|Wrap|Line Numbers
  1. <form name=form>
  2.   <table id=table>
  3.    <tr>
  4.     <td><input type=textbox name=text1></td>
  5.     <td><input type=textbox name=text2></td>
  6.     <td><a href="#" onclick="PopUp(this)" value=click><input type=textbox name=ids></a></td>
  7.   </tr>
  8.  </table>
  9.  
  10. <input type=button onclick="addRow()">
  11. </form>
  12.  
I am getting the error when i click the link in the dynamically added rows.for the first row the pop up is working.Is there any error in the method i have used for naming the 2nd textbox??
i tried txtInp2.setAttribute('name','ids')also but it did not work.
using alert(ids.length)in the PopUp function also gives the same error.

again ,alert(document.form.ids.length)gives 1.

THANKS..!!!!
sandeep.
Aug 28 '07 #4

dmjpro
100+
P: 2,476
You better to use parentNode instead of parentElement.
parentElement is only supported by IE, but parentNode supported by all browser.
Try it I think it will work fine.
Gud luck,

Kind regards,
Dmjpro.
Aug 28 '07 #5

P: 10
You better to use parentNode instead of parentElement.
parentElement is only supported by IE, but parentNode supported by all browser.
Try it I think it will work fine.
Gud luck,

Kind regards,
Dmjpro.
Thanks.. I used parentNode instead of parentElement., but i am getting the same error..
I think i am not able to name the newly added text boxes in the rows generated by addRow() script.....

alert(document.form.ids.length) is giving me 1,(first row already present in the form before adding rows..)
even after i add some extra rows by add row script.....i think there is some error in the method i have used for adding name attribute for 2nd textbox... I am not able to access them via their names.
i have used
Expand|Select|Wrap|Line Numbers
  1. function addRow()
  2. {
  3.       var secondCell=newRow.insertCell(2);
  4.     var txtInp2=document.createElement('input');
  5.     txtInp2.name="ids"; // is there any error in this?????????
  6.     txtInp2.type='text';
  7.     txtInp2.value="";
  8.  
  9. }
  10.  
plzzzzzz help....
thanks and regards..
sandeep.
Aug 30 '07 #6

dmjpro
100+
P: 2,476
Thanks.. I used parentNode instead of parentElement., but i am getting the same error..
I think i am not able to name the newly added text boxes in the rows generated by addRow() script.....

alert(document.form.ids.length) is giving me 1,(first row already present in the form before adding rows..)
even after i add some extra rows by add row script.....i think there is some error in the method i have used for adding name attribute for 2nd textbox... I am not able to access them via their names.
i have used
Expand|Select|Wrap|Line Numbers
  1. function addRow()
  2. {
  3.       var secondCell=newRow.insertCell(2);
  4.     var txtInp2=document.createElement('input');
  5.     txtInp2.name="ids"; // is there any error in this?????????
  6.     txtInp2.type='text';
  7.     txtInp2.value="";
  8.  
  9. }
  10.  
plzzzzzz help....
thanks and regards..
sandeep.
You new row Created or not?
Please let me know first.

Kind regards,
Dmjpro.
Aug 30 '07 #7

P: 10
ya... my new row is getting created without any error.......
only the link for pop up in the newly added rows is not working.... :(
Aug 30 '07 #8

dmjpro
100+
P: 2,476
ya... my new row is getting created without any error.......
only the link for pop up in the newly added rows is not working.... :(
I think these two lines reporting the error.

Expand|Select|Wrap|Line Numbers
  1. var link2=document.createElement('<a href="#"onClick="javascript:Popup(this)">');
  2. var image2=document.createElement('<IMG align=middle border=0 src='find.gif'>');
  3. //These two line are wrong.
  4.  
Expand|Select|Wrap|Line Numbers
  1. var link2 =document.createElement('a');
  2. link2.setAttribute('href','javascript:void(0)');
  3. link2.setAttribute('onclik','javascript:Popup(this)');
  4. var image2=document.createElement('img');
  5. image2.setAttribute('align','middle');
  6. image2.setAttribute('border','0');
  7. image2.setAttribute('src','find.gif');
  8. //Replace those two line with these lines then see what happens.
  9.  
Best of luck with your try.

Kind regards,
Dmjpro.
Aug 30 '07 #9

P: 10
Thanks for replying.
i tried what u suggested. But again i am getting the same error.
I there is a problem where i am assigning names to the text box (txtInp2.setAttribute('name','ids');

I actually copied the two scripts from somewhere, and i think it works this way.
Expand|Select|Wrap|Line Numbers
  1. 1.obj = document.form.ids;
  2. // 1->This should give me list of all all form elements with name 'ids';
  3.  
  4. 2.if(obj.length != null)
  5.    window.id=document.form.ids(currentRowIndex-1);
  6.  else
  7.   window.id=obj;
  8. //2-> this should set the value ' window.id' (got from jsp) to the textbox adjacent to the image which is clicked,since there are many textboxes with name "ids"
  9.  
  10. 3.urlString = "find.jsp'    newWindow=window.open(urlString,"lookup","width=480,height=230);
  11.     newWindow.focus();
  12. //3-> this should open the find.jsp in a new window and focus on it from which user can select an id by clicking on a already existing id(jsp fetches list of existing ids when parameter 'lookup' is passed to it.)
  13.  
I am getting a problem in line2, and the error is
"obj.length is null or not an object",
which means the script is not able to access the newly added textbox with name "ids".....

document.form.ids shouldgive me all the form elements with name "ids",
but i am not able to get the newly added elements(textboxes with name "ids") that are added to the form using addRow().

Is there any other method to get access to the form elements by name ?

thanks...!
regards,
sandeep.
Aug 30 '07 #10

dmjpro
100+
P: 2,476
Thanks for replying.
i tried what u suggested. But again i am getting the same error.
I there is a problem where i am assigning names to the text box (txtInp2.setAttribute('name','ids');

I actually copied the two scripts from somewhere, and i think it works this way.
Expand|Select|Wrap|Line Numbers
  1. 1.obj = document.form.ids;
  2. // 1->This should give me list of all all form elements with name 'ids';
  3.  
  4. 2.if(obj.length != null)
  5.    window.id=document.form.ids(currentRowIndex-1);
  6.  else
  7.   window.id=obj;
  8. //2-> this should set the value ' window.id' (got from jsp) to the textbox adjacent to the image which is clicked,since there are many textboxes with name "ids"
  9.  
  10. 3.urlString = "find.jsp'    newWindow=window.open(urlString,"lookup","width=480,height=230);
  11.     newWindow.focus();
  12. //3-> this should open the find.jsp in a new window and focus on it from which user can select an id by clicking on a already existing id(jsp fetches list of existing ids when parameter 'lookup' is passed to it.)
  13.  
I am getting a problem in line2, and the error is
"obj.length is null or not an object",
which means the script is not able to access the newly added textbox with name "ids".....

document.form.ids shouldgive me all the form elements with name "ids",
but i am not able to get the newly added elements(textboxes with name "ids") that are added to the form using addRow().

Is there any other method to get access to the form elements by name ?

thanks...!
regards,
sandeep.
Well.
Can you give me your whole HTML code and javaScript.
I will test it.And one more what you want, i mean what is your objective with this Page?
Ok Tell me everything about details.

Then i think I ll be able to solve your problem.

Kind regards,
Dmjpro.
Aug 30 '07 #11

acoder
Expert Mod 15k+
P: 16,027
You shouldn't use the same name for more than one element unless it's a set of checkboxes or radio buttons. Choose unique names. In any case, you can still get all elements with the name "ids" using
Expand|Select|Wrap|Line Numbers
  1. document.getElementsByName("ids");
Aug 30 '07 #12

P: 10
You shouldn't use the same name for more than one element unless it's a set of checkboxes or radio buttons. Choose unique names. In any case, you can still get all elements with the name "ids" using
Expand|Select|Wrap|Line Numbers
  1. document.getElementsByName("ids");
@ DMJPRO... hi.. thanks..!! wil put on my html and javascript as soon as possible,.... since i will have to simplify them and also since i dont know how 'find.jsp' works....... mostly by calling the below code
Expand|Select|Wrap|Line Numbers
  1. urlString = "\find.jsp"
  2. newWindow=window.open(urlString,"findId",'width=480,height=230');
  3.     newWindow.focus();
  4.  
i wil b passing the entered value in the current text box to the jsp(it compares if the filled in id with the existing ids) and then from jsp ill be getting back an existing id....But my problem is i am not able to access the particular textbox in the table....!!!!
Thanks!!!
@ acoder.
Thanks for the suggestion, Since i was not able to get te form elements in javascript (popup), i thought i will assign id attribute to the textboxes and now i am assigning the id to each textbox as
Expand|Select|Wrap|Line Numbers
  1. txtInp2.setAttribute('id','id'+numRows);
  2. // numRows is the number of rows in table and since there is only one textbox in one row, the ids of all the textboxes with name "ids" will be different"
  3.  
However,,, i came to know that in my script for popup, i am not able to access any newly added(via addRow() script) elements, either by their names or ids..!! :(
i tried the following code....

Expand|Select|Wrap|Line Numbers
  1.  function popUp(obj)
  2. {
  3.   currentRowIndex = obj.parentElement.parentElement.rowIndex;
  4.   var tbl=document.getElementById('table');// i got access to the table,
  5.   var currentRow=tbl.rows(currentRowIndex);// i got access to the current row,,
  6.   var currentTxtBox=currentRow.getElementsByTagName("TD")[2];
  7.        // i got access to the ids txtBox...!!!!
  8.        // BUT.. when i did
  9.     alert(currentTxtBox.name);
  10.      // i got a null value.......... :( , i am supposed to get "ids" in alertbox..
  11.  
  12.  
I m not sure i am doing error in assigning name to the newly added cell.
currently working on that same.....

hope i wil figure out where im going wrong.....
Aug 30 '07 #13

acoder
Expert Mod 15k+
P: 16,027
@ acoder.
Thanks for the suggestion, Since i was not able to get te form elements in javascript (popup), i thought i will assign id attribute to the textboxes and now i am assigning the id to each textbox as
Expand|Select|Wrap|Line Numbers
  1. txtInp2.setAttribute('id','id'+numRows);
  2. // numRows is the number of rows in table and since there is only one textbox in one row, the ids of all the textboxes with name "ids" will be different"
  3.  
Good idea. Then use document.getElementById to access the element.
However,,, i came to know that in my script for popup, i am not able to access any newly added(via addRow() script) elements, either by their names or ids..!! :(
i tried the following code....

Expand|Select|Wrap|Line Numbers
  1.  function popUp(obj)
  2. {
  3.   currentRowIndex = obj.parentElement.parentElement.rowIndex;
  4.   var tbl=document.getElementById('table');// i got access to the table,
  5.   var currentRow=tbl.rows(currentRowIndex);// i got access to the current row,,
  6.   var currentTxtBox=currentRow.getElementsByTagName("TD")[2];
  7.        // i got access to the ids txtBox...!!!!
  8.        // BUT.. when i did
  9.     alert(currentTxtBox.name);
  10.      // i got a null value.......... :( , i am supposed to get "ids" in alertbox..
  11.  
  12.  
The problem with that code is that you're getting the table cell (TD), not the input text box within the cell.
Aug 30 '07 #14

P: 10
Good idea. Then use document.getElementById to access the element.

The problem with that code is that you're getting the table cell (TD), not the input text box within the cell.
Thanks..!!! Ya that was the problem,,!!
But please take a look at this code, i have modified it..
now i am using the following code.
I tried to alert the name of the 2nd textbox of the currentRow,( txtbox named "ids")
Expand|Select|Wrap|Line Numbers
  1. function PopUp(obj)
  2. {
  3.         currentRowIndex = obj.parentElement.parentElement.rowIndex;
  4.         var tbl=document.getElementById('table');
  5.      var currentRow=tbl.rows(currentRowIndex-1);
  6.  
  7.     var secondCell=currentRow.getElementsByTagName('TD')[1];
  8.     var txtbox=secondCell.getElementsByTagName('input');
  9.           // till here everything is fine.
  10.     if(txtbox!=null)
  11.         {alert(txtbox.name);}
  12.     else 
  13.        {alert("txtbox is null")}
  14.  
  15. //document.getElementById('ids'+currentRowIndex)
  16. // i tried assigning the ids to the textboxes and fetching them here,using the above method, but for some reason i dont know why,this method is not working in the popup.....!! 
  17.  
  18. <note>window.open etc i have excluded.<note>
  19. }
  20.  
I am getting "undefined" in the alert box.
but i am quite sure i have reached the textbox,but i donno why i am not able to alert its name........
Plz tel me if i am going wrong somewhere,,....

@acoder.
Aug 30 '07 #15

acoder
Expert Mod 15k+
P: 16,027
I am getting "undefined" in the alert box.
but i am quite sure i have reached the textbox,but i donno why i am not able to alert its name
If you look at line 8, you're getting elements (notice the plural) with the tag name of "input". Even if there's one, it still returns an array. So get the first element of the array (you could add [0] to the end).
Aug 31 '07 #16

P: 10
@acoder...

Hi..,.
line 8 wil return me an array only when there are many elements in the second cell with tagname<input> right...?? is putting [0] mandatory if i have only one element in that cell,..?? like in the second cell i am currently having only one <input> tag, one <a> tag and one <img> tag......
Aug 31 '07 #17

acoder
Expert Mod 15k+
P: 16,027
It will always return an array whether there is 1 or more elements. If you are sure that there is an element and you want the first (and only) one, then use the 0 index to access the element.
Aug 31 '07 #18

P: 10
@DMJPRO

hi..!! i have given my simplified form and script... plz take a look..
i am trying to alert the number of elements with name 'ids' in the test() function.

Expand|Select|Wrap|Line Numbers
  1. <HTML> 
  2. <HEAD>
  3. <script>
  4. function addRow()
  5. {
  6.   var tblBody = document.getElementById('table').tBodies[0];
  7.   var node=document.createElement('TR')// this time i am using cloneNode method.
  8.   var cell=document.createElement('TD')
  9.  
  10.   var text=document.createElement('input')
  11.   text.type='text';
  12.   text.name='ids';
  13.  
  14.  var link=document.createElement('a');
  15.  link.href = "#";
  16.  link.onClick ='javascript:test()';
  17.  
  18.  var button=document.createElement('input')
  19.  button.type='button';
  20.  button.value='click';
  21.  
  22.  link.appendChild(button);
  23.  cell.appendChild(text)
  24.  cell.appendChild(link)
  25.  
  26.  node.appendChild(cell)
  27.  
  28.  var newNode = node.cloneNode(true)
  29.  tblBody.appendChild(newNode);
  30. }
  31. function test()
  32. {
  33. var ids=document.getElementsByName('ids');
  34. alert(ids.length)
  35. }
  36. </script>
  37.  
  38. </HEAD>
  39.  
  40. <BODY>
  41.     <TABLE id=table>
  42.     <TBODY>
  43.     </TBODY>
  44.     </TABLE>
  45.  
  46.     <TABLE>
  47.     <TR>
  48.         <TD><input type=button onClick="addRow()" value=add></TD>
  49.         <TD><input type=button onClick="test()" value=test></TD>
  50.     </TR>
  51.  
  52.     </TABLE>
  53. </BODY>
  54. </HTML>
  55.  
Thanks and Regards...
sandeep...
Aug 31 '07 #19

Post your reply

Sign in to post your reply or Sign up for a free account.