• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

Dynamically creating tables rows...

Hi

I have the folling code that creates a new row when the user has tabbed past the last table cell for a row.

It only seems to work for the first row that is added and the new rows dont seem to fire the onblur event??

<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript>
<!--
function InsertRow(){
     
     var objSource = window.event.srcElement;
     alert(objSource.id);
     if(objSource.parentElement.nextSibling==null)
     {
          mytableBody=document.createElement("TBODY");
          mycurrentRow=document.createElement("TR");
          for(i=1; i<4; i++)
          {
               counter.value=parseInt(counter.value)+1;
               mycurrentCell=document.createElement("TD");
               mycurrentText=document.createElement("INPUT");
               mycurrentText.id="text" + counter.value;
               mycurrentText.name="text" + counter.value;
               mycurrentText.onblur="InsertRow();";//problem is here
               
               alert(mycurrentText.onblur);
                             
               mycurrentCell.appendChild(mycurrentText);
               mycurrentRow.appendChild(mycurrentCell);
          }
          mytableBody.appendChild(mycurrentRow);
          tblTest.appendChild(mytableBody);
     }
     
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<table id="tblTest" name="tblTest" >
     <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>          
     </tr>
     <tbody>
          <tr>
               <td><INPUT type="text" id=text1 name=text1 onblur="InsertRow()"></td>
               <td><INPUT type="text" id=text2 name=text2 onblur="InsertRow()"></td>
               <td><INPUT type="text" id=text3 name=text3 onblur="InsertRow()"></td>
          </tr>
     </tbody>
</table>

<input type="hidden" id="counter" name="counter" value="3">
<div id="here" name="here"></div>

</BODY>
</HTML>
0
SammyG
Asked:
SammyG
  • 5
  • 3
  • 2
1 Solution
 
knightEknightCommented:
you are only allowing 3 rows with this statement:

for(i=1; i<4; i++)
0
 
knightEknightCommented:
or is that columns?
0
 
SammyGAuthor Commented:
Columns
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
NushiCommented:
hi there. in order to attach event to an element you have to do the following and it will fix your problem:

fix the folloowing line and it will work for you.
ne line:

mycurrentText.onblur=InsertRow

if you place it in "" it handle it as a string and not as function.
that was your problem.

nushi.
0
 
SammyGAuthor Commented:
I now get an out of memory error?

Here is the code:

<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript>
<!--
function InsertRow(){
     
     var objSource = window.event.srcElement;
     if(objSource.parentElement.nextSibling==null)
     {
          mytableBody=document.createElement("TBODY");
          mycurrentRow=document.createElement("TR");
          for(i=1; i<4; i++)
          {
               counter.value=parseInt(counter.value)+1;
               mycurrentCell=document.createElement("TD");
               mycurrentText=document.createElement("INPUT");
               mycurrentText.id="text" + counter.value;
               mycurrentText.name="text" + counter.value;
               mycurrentText.onblur=InsertRow()//problem is here
                             
               mycurrentCell.appendChild(mycurrentText);
               mycurrentRow.appendChild(mycurrentCell);
          }
          mytableBody.appendChild(mycurrentRow);
          tblTest.appendChild(mytableBody);
     }
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<table id="tblTest" name="tblTest" >
     <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>          
     </tr>
     <tbody>
          <tr>
               <td><INPUT type="text" id=text1 name=text1 onblur="InsertRow()"></td>
               <td><INPUT type="text" id=text2 name=text2 onblur="InsertRow()"></td>
               <td><INPUT type="text" id=text3 name=text3 onblur="InsertRow()"></td>
          </tr>
     </tbody>
</table>

<input type="hidden" id="counter" name="counter" value="3">
<div id="here" name="here"></div>

</BODY>
</HTML>
0
 
NushiCommented:
nope.
 type the line as i gave you.
without the ()

simply

mycurrentText.onblur=InsertRow


Nushi.
0
 
NushiCommented:
i am waiting for your comment if its working or not.

Nushi.
0
 
NushiCommented:
i am waiting for your comment if its working or not.

Nushi.
0
 
SammyGAuthor Commented:
Ah - thanks

Just need to set focus to the first column of the new row and all is GOOOOOD!

S
0
 
NushiCommented:
i am waiting for your comment if its working or not.

Nushi.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now