Solved

Dynamically creating tables rows...

Posted on 2002-04-29
10
248 Views
Last Modified: 2012-08-14
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
Comment
Question by:SammyG
  • 5
  • 3
  • 2
10 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 6977818
you are only allowing 3 rows with this statement:

for(i=1; i<4; i++)
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6977820
or is that columns?
0
 

Author Comment

by:SammyG
ID: 6977826
Columns
0
 
LVL 10

Accepted Solution

by:
Nushi earned 50 total points
ID: 6980056
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
 

Author Comment

by:SammyG
ID: 6980072
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 10

Expert Comment

by:Nushi
ID: 6980075
nope.
 type the line as i gave you.
without the ()

simply

mycurrentText.onblur=InsertRow


Nushi.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 6980077
i am waiting for your comment if its working or not.

Nushi.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 6980087
i am waiting for your comment if its working or not.

Nushi.
0
 

Author Comment

by:SammyG
ID: 6980089
Ah - thanks

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

S
0
 
LVL 10

Expert Comment

by:Nushi
ID: 6980095
i am waiting for your comment if its working or not.

Nushi.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Full Screen problem when auto scale IFRAME 2 65
Rhino javascript replace special characters 4 21
Capture logon name 13 46
insert text field data into html script 13 27
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now