Problems with adding dynamic rows to table

Discussion in 'Javascript' started by daveland, Jun 7, 2004.

  1. daveland

    daveland Guest

    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
     
    daveland, Jun 7, 2004
    #1
    1. Advertisements

  2. That outer table does not properly grow to
    I don't know why it does that, do you can an example page so I can look
    at it?
    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
     
    Vincent van Beveren, Jun 7, 2004
    #2
    1. Advertisements

  3. daveland

    daveland Guest

    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


    <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,rowlist;

    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.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>
     
    daveland, Jun 7, 2004
    #3
  4. 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.
     
    Vincent van Beveren, Jun 7, 2004
    #4
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.