Solved

Dynamically creating tables rows...

Posted on 2002-04-29
10
250 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Sheets script efficiency 2 24
HTML5 frame 5 25
where is team.js? 3 26
How can I enable / disable a text box with a checkbox 3 19
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

777 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