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:Po pup(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.ge tElementById("t able");
var numRows=tbl.row s.length;
var newRow=tbl.inse rtRow(numRows);

//IDs
var secondCell=newR ow.insertCell(2 );
var box2=document.c reateElement('T D');
//textbox
var txtInp2=documen t.createElement ('input');
txtInp2.name="I Ds";
txtInp2.type='t ext';
txtInp2.value=" ";
//image
var link2=document. createElement(' <a href="#"onClick ="javascript:Po pup(this)">');

var image2=document .createElement( '<IMG align=middle border=0 src='find.gif'> ');
link2.appendChi ld(image2);
box2.appendChil d(txtInp2);
box2.appendChil d(link2);
secondCell.appe ndChild(box2);

// i am appending image to link , txtInp2 and link to the box, and box2 to //secondCell.
}
function Popup(obj)
{
currentRowIndex = obj.parentEleme nt.parentElemen t.rowIndex;
obj = document.form.I Ds;
if(obj.length != null)
{
window.Id=docum ent.form.IDs(cu rrentRowIndex-1);
}
else
{
window.Id=obj;
}

var urlString = <something>;
image=window.op en(urlString,"w idth=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:Po pup(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.setAttr ibute('name','i ds')also but it did not work.
using alert(ids.lengt h)in the PopUp function also gives the same error.

again ,alert(document .form.ids.lengt h)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.setAtt ribute('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.i ds shouldgive me all the form elements with name "ids",
but i am not able to get the newly added elements(textbo xes 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.