Solved

Dynamically creating tables rows...

Posted on 2002-04-29
10
247 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…
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…

746 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

14 Experts available now in Live!

Get 1:1 Help Now