Dynamic Creation of table

Discussion in 'ASP General' started by philin007@gmail.com, Sep 25, 2006.

  1. Guest

    Hi Guys,
    Could any one help me out with codes to add rows to a table. Well I
    kinda of got the codes from the following site
    (http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm) the
    problem is this example only shows input box. Now i have a list that
    means a 'select box' for which the value is retrieved from Database and
    populated into the select list box. Now according to the example if all
    residing in the javascript how am i gng to do that!. For example I have
    the default row which has 3 text box, a select box(populated from
    database and a delete button). Outside the table i have add row
    When i click on add row another row should be created with 3 text box,
    a select box and a delete button. all these input box and select box
    whould have unique names cas i need to pass them to another page to get
    the values.

    following is the code that I have written :

    -***************************************

    <script language="javascript">

    //add a new row to the table
    function addRow()
    {
    var tbl = document.getElementById("tblGrid");
    var nextRow = tbl.tBodies[0].rows.length;

    if (nextRow > 5)
    {
    return;
    }
    else
    {
    //add a row to the rows collection and get a reference to the newly
    added row
    var newRow = document.all("tblGrid").insertRow();

    alert ('nextrow' + nextRow);
    var popCal1 = 'javascript:cal1' + nextRow + '.popup();'
    var popCal2 = 'javascript:cal2' + nextRow + '.popup();'

    var nameBegDt = 'txtBeginDt'+ nextRow
    var nameEndDt = 'txtEndDt'+ nextRow
    var nameSubTyp = 'selSubTyp'+ nextRow
    var nameLeaveAppl = 'txtLeaveAppl'+ nextRow
    //add 3 cells (<td>) to the new row and set the innerHTML to contain
    text boxes

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
    type='text' SIZE='10' name='" + nameBegDt + "'
    onFocus='this.blur();'/><a href='" + popCal1 + "'><img
    src='img/cal.gif' width='16' height='16' border='0' alt='Click Here to
    Pick up the date'></a></TD>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
    type='text' SIZE='10' name='" + nameEndDt + "'
    onFocus='this.blur();'/><a href='" + popCal2 + "'><img
    src='img/cal.gif' width='16' height='16' border='0' alt='Click Here to
    Pick up the date'></a></TD>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><select
    name='"+ nameSubTyp +"' >--Select--<option value='F'></option><option
    value='AM'>AM (Half)</option><option value='PM'>PM
    (Half)</option><option value='S'>Sat Leave</option><option
    value='T'>1.5 days</option></select></TD>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
    SIZE='4' maxlength='4' type='text' name='" + nameLeaveAppl + "'></TD>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
    type='image' src='images/delete.jpg'
    onclick='removeRow(this);'/></TD>";

    }
    }

    //deletes the specified row from the table
    function removeRow(src)
    {
    /* src refers to the input button that was clicked.
    to get a reference to the containing <tr> element,
    get the parent of the parent (in this case case <tr>)
    */
    var tbl = document.getElementById("tblGrid");
    var nextRow = tbl.tBodies[0].rows.length;
    alert("here:" + nextRow);

    if (nextRow < 3)
    {
    return;
    }
    else
    {
    var oRow = src.parentElement.parentElement;

    //once the row reference is obtained, delete it passing in its
    rowIndex
    document.all("tblGrid").deleteRow(oRow.rowIndex);
    }
    }

    </script>
    ****************************************************
    can anyone help please.

    Thanks in advance

    Regards
    philip
     
    , Sep 25, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > Hi Guys,
    > Could any one help me out with codes to add rows to a table. Well I
    > kinda of got the codes from the following site
    > (http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm) the


    If this is an example of the quality of the code from that site, stop
    using it.


    > problem is this example only shows input box. Now i have a list that
    > means a 'select box' for which the value is retrieved from Database and
    > populated into the select list box. Now according to the example if all
    > residing in the javascript how am i gng to do that!. For example I have
    > the default row which has 3 text box, a select box(populated from
    > database and a delete button). Outside the table i have add row
    > When i click on add row another row should be created with 3 text box,
    > a select box and a delete button. all these input box and select box
    > whould have unique names cas i need to pass them to another page to get
    > the values.
    >
    > following is the code that I have written :
    >
    > -***************************************
    >
    > <script language="javascript">


    The language attribute is deprecated (years ago), type is required.

    <script type="text/javascript">


    >
    > //add a new row to the table


    When posting code, use 2 or 4 spaces for indents and manually wrap code
    at about 70 characters to prevent wrapping. Allowing auto-wrapping
    nearly always introduces more errors.


    > function addRow()
    > {
    > var tbl = document.getElementById("tblGrid");


    DOM methods should be tested before use.


    > var nextRow = tbl.tBodies[0].rows.length;


    Why not put the tbody element in the HTML and add the id to that? Then
    you'll know you are getting the right table section, rather than just
    guessing that you want the first one - what if you later decide to add
    a thead element? Or another tbody?


    > if (nextRow > 5)
    > {
    > return;
    > }
    > else
    > {
    > //add a row to the rows collection and get a reference to the newly
    > added row
    > var newRow = document.all("tblGrid").insertRow();


    Since you already have a reference to the table stored in the variable
    "tbl", there seems little point in gettting it again. Also,
    document.all should be included only for support of old IE, not as a
    main part of the code. It should be dealt with when you detected
    support for getElementById (as should support for insertRow).

    The insertRow method requires an argument, either the row index to
    insert the row at, or -1 to add it as the last row. In IE, if you
    don't include a rowIndex argument, it will add it as the last row. In
    other browsers will likey cause an error.

    <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >


    > alert ('nextrow' + nextRow);
    > var popCal1 = 'javascript:cal1' + nextRow + '.popup();'
    > var popCal2 = 'javascript:cal2' + nextRow + '.popup();'
    >
    > var nameBegDt = 'txtBeginDt'+ nextRow
    > var nameEndDt = 'txtEndDt'+ nextRow
    > var nameSubTyp = 'selSubTyp'+ nextRow
    > var nameLeaveAppl = 'txtLeaveAppl'+ nextRow
    > //add 3 cells (<td>) to the new row and set the innerHTML to contain
    > text boxes
    >
    > var oCell = newRow.insertCell();


    Like insertRow, insertCell must have a cell index value as its argument
    (again, IE tollerates no argument and adds the cell as the last cell
    but some (most?) other browsers don't).

    <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >


    > oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
    > type='text' SIZE='10' name='" + nameBegDt + "'
    > onFocus='this.blur();'/><a href='" + popCal1 + "'><img
    > src='img/cal.gif' width='16' height='16' border='0' alt='Click Here to
    > Pick up the date'></a></TD>";


    Here you are attempting to use innerHTML to create a TD element as a
    child of a TD element. Whatever a particular browser may make of that
    will be the result of error correction (and likely different across
    browsers).

    You can use innerHTML to modify the content of a cell, but never any
    component of a table (although you can use it to write an entire
    table). The rest of this function is similarly flawed - use DOM
    methods to modify the cell, then add the innerHTML if you must - but
    DOM methods would be better for that too.


    [...]

    > //deletes the specified row from the table
    > function removeRow(src)
    > {
    > /* src refers to the input button that was clicked.
    > to get a reference to the containing <tr> element,
    > get the parent of the parent (in this case case <tr>)
    > */
    > var tbl = document.getElementById("tblGrid");
    > var nextRow = tbl.tBodies[0].rows.length;
    > alert("here:" + nextRow);
    >
    > if (nextRow < 3)
    > {
    > return;
    > }
    > else
    > {
    > var oRow = src.parentElement.parentElement;


    Rather than guessing where the TR is, why not have a function that
    returns the type of parent you are looking for:

    function getParentByTagName(el, tagName){
    var p = el.parent;
    tagName = tagName.toLowerCase();
    (while p && tagName != p.tagName.toLowerCase()){
    p = p.parentNode;
    }
    return p;
    }

    Then in your function:

    var oRow = getParentByTagName(src, 'tr');
    if (oRow && oRow.rowIndex > 3){
    oRow.parentNode.removeChild(oRow);
    }


    >
    > //once the row reference is obtained, delete it passing in its
    > rowIndex
    > document.all("tblGrid").deleteRow(oRow.rowIndex);


    You don't need to user document.all (or getElementById) to remove an
    element if you already have a reference to the element.

    [...]

    > can anyone help please.


    I hope I did.


    --
    Rob
     
    RobG, Sep 26, 2006
    #2
    1. Advertising

  3. JRS: In article <>,
    dated Mon, 25 Sep 2006 02:27:58 remote, seen in
    news:comp.lang.javascript, posted :

    > Well I
    >kinda of got the codes from the following site
    >(http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm) the


    Code copied from the Web is usually badly-written.

    >
    ><script language="javascript">

    ^^^^^^^^^^^^^^^^^^^^ Deprecated. Use type="text/javascript"

    >
    > //add a new row to the table
    > function addRow()


    Don't over-indent, especially in News. Two spaces per level is
    sufficient. If your news-editor cannot replace tabs globally, ditch it.
    > {
    > var tbl = document.getElementById("tblGrid");
    > var nextRow = tbl.tBodies[0].rows.length;
    >
    > if (nextRow > 5)
    > {
    > return;
    > }
    > else


    Using else after if () return is pointless.
    > {
    > //add a row to the rows collection and get a reference
    >to the newly
    >added row


    Don't allow your posting agent to wrap code. Code in news should be
    directly readable and executable, if you want readers to bother with it.

    > var newRow = document.all("tblGrid").insertRow();


    Using document.all is at best unfashionable. Read FAQ 4.39.



    It's a good idea to read the newsgroup and its FAQ. See below.
    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
     
    Dr John Stockton, Sep 26, 2006
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Glos
    Replies:
    0
    Views:
    658
    Rick Glos
    Jul 8, 2003
  2. =?Utf-8?B?QkxpVFpXaU5H?=

    Adding dynamic LinkButton to dynamic table

    =?Utf-8?B?QkxpVFpXaU5H?=, Jul 27, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    765
    =?Utf-8?B?QkxpVFpXaU5H?=
    Jul 27, 2005
  3. The_Original_MB
    Replies:
    2
    Views:
    211
    The_Original_MB
    Feb 7, 2005
  4. Dynamic Creation of table

    , Sep 25, 2006, in forum: Javascript
    Replies:
    2
    Views:
    143
    Dr John Stockton
    Sep 26, 2006
  5. Rex the Strange

    A warning about dynamic table creation

    Rex the Strange, Mar 6, 2008, in forum: Javascript
    Replies:
    3
    Views:
    123
    Henry
    Mar 10, 2008
Loading...

Share This Page