Adding javasript property to a cell in dynamically added rows.

[sandeepdesai]

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...!

[epots9]

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:

var link2=document.createElement('a');
link2.href = "#";
link2.onclick = function(){Popup(this);};
 

try that out and tell us how it goes,
good luck

[pbmods]

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.

[sandeepdesai]

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.

 
<script>
function(addRow)
{
    var tbl=document.getElementById("table");
    var newRow=tbl.insertRow(tbl.rows.length);
 
    <note>0th and 1st cell added,which are textboxes<note>
 
    var secondCell=newRow.insertCell(2);
    var txtInp2=document.createElement('input');
    txtInp2.name="ids"; //setting name to newly added cell.
    txtInp2.type='text';
    txtInp2.value="";
 
     var link2=document.createElement('a');
     link2.href = "#";
     link2.onclick = function(){Popup(this);};
     link2.value=click;
     secondCell.appendChild(txtInp2);
     secondCell.appendChild(link2);
    tbl.appendChild(newRow);
}
function PopUp(obj)
{
currentRowIndex = obj.parentElement.parentElement.rowIndex;
 
        obj = document.form.ids;
        if(obj.length != null)// <NOTE> im getting an error here saying obj.length is null or not an object.<NOTE>
        {
            window.id=document.form.ids(currentRowIndex-1);
        }
        else
        {
            window.id=obj;
        }
 
        urlString = "\findId.jsp";
        newWindow=window.open(urlString,'find',"width=480,height=230");
        newWindow.focus();
}
</script>
 

and the FORM element goes like this..

<form name=form>
  <table id=table>
   <tr>
    <td><input type=textbox name=text1></td>
    <td><input type=textbox name=text2></td>
    <td><a href="#" onclick="PopUp(this)" value=click><input type=textbox name=ids></a></td>
  </tr>
 </table>
 
<input type=button onclick="addRow()">
</form>
 

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.

[dmjpro]

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.

[sandeepdesai]

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

function addRow()
{
      var secondCell=newRow.insertCell(2);
    var txtInp2=document.createElement('input');
    txtInp2.name="ids"; // is there any error in this?????????
    txtInp2.type='text';
    txtInp2.value="";
 
}
 

plzzzzzz help....
thanks and regards..
sandeep.

[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

function addRow()
{
      var secondCell=newRow.insertCell(2);
    var txtInp2=document.createElement('input');
    txtInp2.name="ids"; // is there any error in this?????????
    txtInp2.type='text';
    txtInp2.value="";
 
}
 

plzzzzzz help....
thanks and regards..
sandeep.

You new row Created or not?
Please let me know first.

Kind regards,
Dmjpro.

[sandeepdesai]

ya... my new row is getting created without any error.......
only the link for pop up in the newly added rows is not working.... :(

[dmjpro]

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.

var link2=document.createElement('<a href="#"onClick="javascript:Popup(this)">');
var image2=document.createElement('<IMG align=middle border=0 src='find.gif'>');
//These two line are wrong.
 

var link2 =document.createElement('a');
link2.setAttribute('href','javascript:void(0)');
link2.setAttribute('onclik','javascript:Popup(this)');
var image2=document.createElement('img');
image2.setAttribute('align','middle');
image2.setAttribute('border','0');
image2.setAttribute('src','find.gif');
//Replace those two line with these lines then see what happens.
 

Best of luck with your try.

Kind regards,
Dmjpro.

[sandeepdesai]

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.

1.obj = document.form.ids;
// 1->This should give me list of all all form elements with name 'ids';
 
2.if(obj.length != null)
   window.id=document.form.ids(currentRowIndex-1);
 else
  window.id=obj;
//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"
 
3.urlString = "find.jsp'    newWindow=window.open(urlString,"lookup","width=480,height=230);
    newWindow.focus();
//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.)
 

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.

[dmjpro]

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.

1.obj = document.form.ids;
// 1->This should give me list of all all form elements with name 'ids';
 
2.if(obj.length != null)
   window.id=document.form.ids(currentRowIndex-1);
 else
  window.id=obj;
//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"
 
3.urlString = "find.jsp'    newWindow=window.open(urlString,"lookup","width=480,height=230);
    newWindow.focus();
//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.)
 

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.

[acoder]

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

document.getElementsByName("ids");

[sandeepdesai]

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

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

urlString = "\find.jsp"
newWindow=window.open(urlString,"findId",'width=480,height=230');
    newWindow.focus();
 

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

txtInp2.setAttribute('id','id'+numRows);
// 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"
 

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....

 function popUp(obj)
{
  currentRowIndex = obj.parentElement.parentElement.rowIndex;
  var tbl=document.getElementById('table');// i got access to the table,
  var currentRow=tbl.rows(currentRowIndex);// i got access to the current row,,
  var currentTxtBox=currentRow.getElementsByTagName("TD")[2];
       // i got access to the ids txtBox...!!!!
       // BUT.. when i did
    alert(currentTxtBox.name);
     // i got a null value.......... :( , i am supposed to get "ids" in alertbox..
 
 

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.....

[acoder]

@ 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

txtInp2.setAttribute('id','id'+numRows);
// 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"
 

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....

 function popUp(obj)
{
  currentRowIndex = obj.parentElement.parentElement.rowIndex;
  var tbl=document.getElementById('table');// i got access to the table,
  var currentRow=tbl.rows(currentRowIndex);// i got access to the current row,,
  var currentTxtBox=currentRow.getElementsByTagName("TD")[2];
       // i got access to the ids txtBox...!!!!
       // BUT.. when i did
    alert(currentTxtBox.name);
     // i got a null value.......... :( , i am supposed to get "ids" in alertbox..
 
 

The problem with that code is that you're getting the table cell (TD), not the input text box within the cell.

[sandeepdesai]

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")

function PopUp(obj)
{
        currentRowIndex = obj.parentElement.parentElement.rowIndex;
        var tbl=document.getElementById('table');
     var currentRow=tbl.rows(currentRowIndex-1);
 
    var secondCell=currentRow.getElementsByTagName('TD')[1];
    var txtbox=secondCell.getElementsByTagName('input');
          // till here everything is fine.
    if(txtbox!=null)
        {alert(txtbox.name);}
    else 
       {alert("txtbox is null")}
 
//document.getElementById('ids'+currentRowIndex)
// 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.....!! 
 
<note>window.open etc i have excluded.<note>
}
 

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.

[acoder]

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).

[sandeepdesai]

@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......

[acoder]

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.

[sandeepdesai]

@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.

<HTML> 
<HEAD>
<script>
function addRow()
{
  var tblBody = document.getElementById('table').tBodies[0];
  var node=document.createElement('TR')// this time i am using cloneNode method.
  var cell=document.createElement('TD')
 
  var text=document.createElement('input')
  text.type='text';
  text.name='ids';
 
 var link=document.createElement('a');
 link.href = "#";
 link.onClick ='javascript:test()';
 
 var button=document.createElement('input')
 button.type='button';
 button.value='click';
 
 link.appendChild(button);
 cell.appendChild(text)
 cell.appendChild(link)
 
 node.appendChild(cell)
 
 var newNode = node.cloneNode(true)
 tblBody.appendChild(newNode);
}
function test()
{
var ids=document.getElementsByName('ids');
alert(ids.length)
}
</script>
 
</HEAD>
 
<BODY>
    <TABLE id=table>
    <TBODY>
    </TBODY>
    </TABLE>
 
    <TABLE>
    <TR>
        <TD><input type=button onClick="addRow()" value=add></TD>
        <TD><input type=button onClick="test()" value=test></TD>
    </TR>
 
    </TABLE>
</BODY>
</HTML>
 

Thanks and Regards...
sandeep...