Solved

Dynamically creating tables rows...

Posted on 2002-04-29
10
254 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
need help with share buttons 11 72
Html using "Or" in condition 3 27
Jquery if else not working ... WHY? 5 26
sort Multi-dimensional array 6 16
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 …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

726 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