473,391 Members | 1,426 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,391 software developers and data experts.

Problems with adding dynamic rows to table

I am working on some JavaScript that dynamically adds rows to a table
in response to a button click. A new row does appear on the screen
when the button is clicked. However, that table to which a row has
been added is itself contained within an outer table (to handle the
desired screen layout). That outer table does not properly grow to
contain the new size of the table to which the row was added. (More
specifically, I have sporadically seen the outer table grow correctly,
but then most of the time it does not grow as desired.) Is there
something that needs to be done in the code that will make the right
thing happen? (This phenomena appears in Netscape 7.1 -- things work
correctly under Internet Explorer 6.0)
A second anomoly concerns a button that appears in the newly added
row. An "onClick" event is associated with that dynamically added
button. The newly added button works correctly under Netscape 7.1 but
fails to work under Internet Explorer 6.0. (It is like Explorer will
not honor an event that is set in place by code that is dynamically
created after the page is loaded.) Shown below is an excerpt of the
code that is attempting to set up the desired button. Is there
something apecial that must be done in the code to get Explorer to
handle this properly (I have tried spelling things as both "onclick"
and also "onClick")?

tbldata = document.createElement("TD");
item = document.createElement("BUTTON");
v = 'doaction("Edit",' + n +')';
item.setAttribute("name","Edit");
item.setAttribute("onclick",v);
textitem = document.createTextNode("Edit");
item.appendChild(textitem);
tbldata.appendChild(item);

Any suggestions would be appreciated.

Dave Eland
da******@oru.edu
Jul 23 '05 #1
3 3118
> That outer table does not properly grow to
contain the new size of the table to which the row was added. (More
specifically, I have sporadically seen the outer table grow correctly,
but then most of the time it does not grow as desired.) Is there
something that needs to be done in the code that will make the right
thing happen? (This phenomena appears in Netscape 7.1 -- things work
correctly under Internet Explorer 6.0)
I don't know why it does that, do you can an example page so I can look
at it?

A second anomoly concerns a button that appears in the newly added
row. An "onClick" event is associated with that dynamically added
button. The newly added button works correctly under Netscape 7.1 but
fails to work under Internet Explorer 6.0. (It is like Explorer will
not honor an event that is set in place by code that is dynamically
created after the page is loaded.) Shown below is an excerpt of the
code that is attempting to set up the desired button. Is there
something apecial that must be done in the code to get Explorer to
handle this properly (I have tried spelling things as both "onclick"
and also "onClick")?


You probably need to create a callback function.

function createCallBack(jsCall) {
return eval("function() { "+jsCall+"; }");
}

item.onclick = createCallBack(v);

Assigning things to onclick by setting attributes is not exactly right,
because onclick is an event, and not an attribute. Therefor you must
assign it like an event. Even better would be to use addEventListener,
but I don't know how well that is supported in IE.

Good luck,
Vincent

Jul 23 '05 #2
Shown below is the sample prototype code I am working on. In addition
to the problems already mentioned, there are also inconsistencies in
toggling the visibiliy of the "Insert", "Update", and "Delete"
buttons. (Things work correctly in Netscape 7.1 and not in Internet
Explorer 6.0. Note that the visibility settings on the SIDSelect and
PIDSelect selection items work correctly in BOTH browsers.)

Thanks for your help!

Dave Eland
da******@oru.edu

<html>
<head>
<script LANGUAGE="JavaScript">
var needsubmit,editnum;

function LTrim(strValue)
{
var LTRIMrgExp = /^\s */;
return strValue.replace(LTRIMrgExp,'');
}
function RTrim(strValue)
{
var RTRIMrgExp = /\s *$/;
return strValue.replace(RTRIMrgExp,'');
}
function Trim(strValue)
{
return LTrim(RTrim(strValue));
}
function setstatus(item,value)
{
document.getElementById(item).setAttribute("STATUS ",value);
}
function getstatus(item)
{
return(document.getElementById(item).getAttribute( "STATUS"));
}
function setvisible(item)
{
var v;

if (getstatus(item) == "Show") v = "visible"; else v = "hidden";
document.getElementById(item).style.visibility = v;
}
function setallvisible()
{
setvisible("SIDSelect");
setvisible("PIDSelect");
setvisible("Insert");
setvisible("Update");
setvisible("Delete");
}
function hadchange(item)
{
setstatus("Insert","Show"); /**/
setstatus("Update","Show"); /**/
setstatus("Delete","Show"); /**/
setallvisible()
}
function addrow()
// add new blank row at end of table
{
var n,v,tbl,tblbody,tblrow,tbldata,item,textitem,rowli st;

tbl = document.getElementById("tbl2");
tblbody = tbl.getElementsByTagName("tbody").item(0);
rowlist = tbl.getElementsByTagName("tr");
n = rowlist.length;

tblrow = document.createElement("TR");

tbldata = document.createElement("TD");
item = document.createElement("INPUT");
item.setAttribute("type","HIDDEN");
item.setAttribute("name","PID");
item.setAttribute("value"," ");
tbldata.appendChild(item);

item = document.createElement("INPUT");
item.setAttribute("type","TEXT");
item.setAttribute("name","PNAME");
item.setAttribute("value"," ");
item.setAttribute("size",15);
item.setAttribute("readonly",true);
tbldata.appendChild(item);

tblrow.appendChild(tbldata);

tbldata = document.createElement("TD");
item = document.createElement("BUTTON");
v = 'doaction("Edit",' + n +')';
item.setAttribute("name","Edit");
item.setAttribute("onclick",v);
textitem = document.createTextNode("Edit");
item.appendChild(textitem);
tbldata.appendChild(item);

tblrow.appendChild(tbldata);

tblbody.appendChild(tblrow);
}
function delrow(rownum)
// delete row if not at end of list
{
var i,v,tbl,tblbody,rowlist,buttonlist;

tbl = document.getElementById("tbl2");
tblbody = tbl.getElementsByTagName("tbody").item(0);
rowlist = tbl.getElementsByTagName("tr");
if (rownum < rowlist.length - 1)
{
tblbody.removeChild(rowlist[rownum]);
buttonlist = document.getElementsByName("Edit");
for (i = 0; i < buttonlist.length; i++)
{
v = 'doaction("Edit",' + i + ')';
buttonlist[i].setAttribute("onClick",v);
}
}
}
function doaction(curaction,num)
{
var i;
var selecteditem,pid,pname,pidlist,pnamelist;

document.thisForm.ACTION.value = curaction;
if (curaction == "SetScreen")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "First")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Prev")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Next")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Last")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Jump")
{
var SIDSelect;

SIDSelect = document.getElementById("SIDSelect");
if (SIDSelect.style.visibility == "hidden")
setstatus("SIDSelect","Show");
else
setstatus("SIDSelect","Hide");
SIDSelect.selectedIndex = -1;
setallvisible();
needsubmit = false;
}
if (curaction == "Edit")
{
var PIDSelect;

editnum = num;
PIDSelect = document.getElementById("PIDSelect");
if (PIDSelect.style.visibility == "hidden")
setstatus("PIDSelect","Show");
else
setstatus("PIDSelect","Hide");
needsubmit = false;
PIDSelect.selectedIndex = -1;
setallvisible();
}
if (curaction == "SelectSID")
{
if (document.thisForm.SIDSelect.value == "Cancel")
{
needsubmit = false;
}
else
{
needsubmit = true;
document.thisForm.submit();
}
setstatus("SIDSelect","Hide");
setallvisible();
}
if (curaction == "SelectPID")
{
if (document.thisForm.PIDSelect.value != "Cancel")
{
selecteditem =
Trim(document.getElementById("PIDSelect").value);
i = selecteditem.indexOf(" ");
pid = Trim(selecteditem.substring(0,i));
pname = Trim(selecteditem.substring(i));
pidlist = document.getElementsByName("PID");
pidlist[editnum].value = pid;
pnamelist = document.getElementsByName("PNAME");
pnamelist[editnum].value = pname;
if (pid == "" && editnum < pidlist.length-1)
{
delrow(editnum);
}
if (pid != "" && editnum == pidlist.length-1)
{
addrow();
}
setstatus("Update","Show");
}
needsubmit = false;
setstatus("PIDSelect","Hide");
setallvisible();
}
if (curaction == "Insert")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Update")
{
needsubmit = true;
document.thisForm.submit();
}
if (curaction == "Delete")
{
needsubmit = true;
document.thisForm.submit();
}
}
function wantsubmit()
{
return(needsubmit);
}
function initialize()
{
editnum = 0;
needsubmit = true;
setstatus("Insert","Hide");
setstatus("Update","Hide");
setstatus("Delete","Hide");
setallvisible();
}
</script>
<title>Suppliers info</title>
</head>
<body onLoad='initialize()'>
<FORM NAME=thisForm ACTION="showparm.cgi" METHOD="POST"
onSubmit='return wantsubmit()'>
<TABLE ID="tbl0" BORDER="1">
<TR>
<TD>
<SELECT NAME="SCREEN" onChange='doaction("SetScreen",0)'>
<OPTION SELECTED> Suppliers
<OPTION> Parts
</SELECT>
<INPUT TYPE="HIDDEN" NAME="ACTION" VALUE="UNKNOWN">
<BR><BR>
<BUTTON ID="First" STATUS="Show"
onClick='doaction("First",0)'>First</BUTTON>
<BUTTON ID="Prev" STATUS="Show"
onClick='doaction("Prev",0)'>Prev</BUTTON>
<BUTTON ID="Next" STATUS="Show"
onClick='doaction("Next",0)'>Next</BUTTON>
<BUTTON ID="Last" STATUS="Show"
onClick='doaction("Last",0)'>Last</BUTTON>
<BUTTON ID="Jump" STATUS="Show"
onClick='doaction("Jump",0)'>Jump</BUTTON>
<BR><BR> Supplier
<INPUT TYPE="HIDDEN" NAME="SID" VALUE="1">
<BR>
<TABLE ID="tbl1" BORDER="1">
<TR>
<TD>SNAME</TD>
<TD>
<INPUT TYPE="TEXT" NAME="SNAME" VALUE="Jones" SIZE=15
onChange='hadchange()'>
</TD>
</TR>

<TR>
<TD>CITY</TD>
<TD>
<INPUT TYPE="TEXT" NAME="CITY" VALUE="Tulsa" SIZE=15
onChange='hadchange()'>
</TD>
</TR>
</TABLE>
<BR> Parts
<BR>
<TABLE ID="tbl2" BORDER="1">
<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="1">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Bolt" SIZE=15 READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",0)'>Edit</BUTTON>
</TD>
</TR>

<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="3">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Washer" SIZE=15
READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",1)'>Edit</BUTTON>
</TD>
</TR>

<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE="4">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE="Screw" SIZE=15
READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",2)'>Edit</BUTTON>
</TD>
</TR>

<TR>
<TD>
<INPUT TYPE="HIDDEN" NAME="PID" VALUE=" ">
<INPUT TYPE="TEXT" NAME="PNAME" VALUE=" " SIZE=15 READONLY=true>
</TD>
<TD>
<BUTTON NAME="Edit" onClick='doaction("Edit",3)'>Edit</BUTTON>
</TD>
</TR>
</TABLE>
<BR>
<BUTTON ID="Insert" STATUS="Hide"
onClick='doaction("Insert",0)'>Insert</BUTTON>
<BUTTON ID="Update" STATUS="Hide"
onClick='doaction("Update",0)'>Update</BUTTON>
<BUTTON ID="Delete" STATUS="Hide"
onClick='doaction("Delete",0)'>Delete</BUTTON>
</TD>

<TD>
<SELECT ID="SIDSelect" NAME="SIDSelect" SIZE=20 STATUS="Hide"
onChange='doaction("SelectSID",0)'>
<OPTION VALUE="Cancel">Cancel</OPTION>
<OPTION VALUE="1 Jones">Jones</OPTION>
<OPTION VALUE="2 Parker">Parker</OPTION>
<OPTION VALUE="3 Baker">Baker</OPTION>
</SELECT>
<SELECT ID="PIDSelect" NAME="PIDSelect" SIZE=20 STATUS="Hide"
onChange='doaction("SelectPID",0)'>
<OPTION VALUE="Cancel">Cancel</OPTION>
<OPTION VALUE=" "> </OPTION>
<OPTION VALUE="1 Bolt">Bolt</OPTION>
<OPTION VALUE="2 Nut">Nut</OPTION>
<OPTION VALUE="3 Washer">Washer</OPTION>
<OPTION VALUE="4 Screw">Screw</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
<script language="javascript" src="showdom2.js"></script>
</body>
</html>
On Mon, 07 Jun 2004 11:45:47 +0200, Vincent van Beveren
<vi*****@provident.remove.this.nl> wrote:
That outer table does not properly grow to
contain the new size of the table to which the row was added. (More
specifically, I have sporadically seen the outer table grow correctly,
but then most of the time it does not grow as desired.) Is there
something that needs to be done in the code that will make the right
thing happen? (This phenomena appears in Netscape 7.1 -- things work
correctly under Internet Explorer 6.0)


I don't know why it does that, do you can an example page so I can look
at it?

A second anomoly concerns a button that appears in the newly added
row. An "onClick" event is associated with that dynamically added
button. The newly added button works correctly under Netscape 7.1 but
fails to work under Internet Explorer 6.0. (It is like Explorer will
not honor an event that is set in place by code that is dynamically
created after the page is loaded.) Shown below is an excerpt of the
code that is attempting to set up the desired button. Is there
something apecial that must be done in the code to get Explorer to
handle this properly (I have tried spelling things as both "onclick"
and also "onClick")?


You probably need to create a callback function.

function createCallBack(jsCall) {
return eval("function() { "+jsCall+"; }");
}

item.onclick = createCallBack(v);

Assigning things to onclick by setting attributes is not exactly right,
because onclick is an event, and not an attribute. Therefor you must
assign it like an event. Even better would be to use addEventListener,
but I don't know how well that is supported in IE.

Good luck,
Vincent


Jul 23 '05 #3
Well, I found one ugly fix, put this after your addrow function and it
will expand... because it will need to reevaluate the DOM tree, else I
wouldn't know

mainTable = document.getElementById("tbl0");
mainTable.style.display='block';
mainTable.style.display= '';

This might also cause some more unpredictable behaviour.

Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Duncan Spence | last post by:
Hi all, I'm sure I'm doing something silly here, but can't see it! I'm creating a series of combo boxes on a Windows Form in VB.NET. The lists of all of the comboboxes are identical and are...
4
by: DotNetJunky | last post by:
I have built a control that runs an on-line help system. Depending on the category you selected via dropdownlist, it goes out and gets the child subcategories, and if there are any, adds a new...
2
by: Viorel | last post by:
Adding new row with default values. In order to insert programmatically a new row into a database table, without direct "INSERT INTO" SQL statement, I use the well-known DataTable.NewRow,...
3
by: Rick | last post by:
I have an interesting problem when I run the following code in Netscape (7.02) vs. IE. This page works great in IE and all my controls bring up the validation summary dialog box if the required...
0
by: Luis Esteban Valencia | last post by:
Hello I wrote a program with code behind in C# to add row into table dynamically and the program worked very well in .Net Framework 1.1. When I run this program in .Net Framework 2.0 beta...
2
by: dschectman | last post by:
This appears to be a feature of IE JavaScript. I am running IE 6.0 with the latest patches from Microsoft. Are there any workarounds other than re-coding the source HTML to place all the...
2
by: Muzzy | last post by:
Hi, I've used information on these newsgroups to build many pages. So I thought that now that I have my script working (something that I've been working on for about a week), I should post it so...
2
by: cbjewelz | last post by:
Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical...
0
by: Eniac | last post by:
Hi, I've been working on a custom user control that needs to be modified and the validation is causing me headaches. The control used to generate a table of 4 rows x 7 columns to display all...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.