Community discussion forum

Back to discussion

Dynamically adding a row in a HTML table

Last post was 18 Aug 2007 at 10:20
Tags: java, javascript, xml United States
  • 4 years ago
    Please help me to add a row in a HTML table dynamically without losing the data entered in the previous rows.
    Each cell in a row contains 2 text boxes and 2 labels.

    Very Urgent ..Please help me either in VBScript or Java Script


    Thank you
    Brinda




    Report abuse
  • 4 years ago
    Ok are your clients all using IE browsers if so you can use VBscript. But I would recommend javascript.

    Firstly is this something you must do client -side?

    If you can afford a post to the server and a rebuild of your table there I would recommend that.

    Otherwise you will need to use the DOM (Document Object Model) and its associated methods to create a DOM node such as  a table row and append it to the table in question.

    To do this you basically need to give the table an ID attribute, create some new row and cell elements and then append them to the document.

    Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Insert Table Row using DOM</title>
    <script language="javascript">
    function addRow()
    {
    var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
    var row = document.createElement("TR");
    var cell1 = document.createElement("TD");
    var inp1 =  document.createElement("INPUT");
    inp1.setAttribute("type","text");
    inp1.setAttribute("value","New row");
    cell1.appendChild(inp1);
    var cell2 = document.createElement("TD");
    cell2.innerHTML = "label3";
    var cell3 = document.createElement("TD");
    cell3.innerHTML = "label4";
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    tbody.appendChild(row);
    //alert(row.innerHTML);
    }
    </script>
    </head>
    <body>
    <table id="table1">
    <tbody>
    <tr>
    <td><input type=text value="Original Row"></td>
    <td>label1</td>
    <td>label2</td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="Insert Row" onClick="addRow();">
    </body>
    </html>


    Report abuse
  • 4 years ago

    See the below code, Its not working, in the sense the rows added dynamically are not getting visible.  Please help
    I am novice in Javascript



    <?xml version="1.0"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:lxslt="http://xml.apache.org/xslt" version="1.0">
    <xsl:import href="../../screen.xsl"/>
    <!-- <xsl:import href="../commonCriteria.xsl"/> -->
    <xslutput method="html" indent="yes"/>


    <!--
    $Base Version: 1.0 $
    $Log: fileDetails.xsl $
    Created 04/12/2005 czstkp
    -->


    <xsl:template name="LocalScript">
     <script type="text/javascript" language="javascript">
     <xsl:comment>
     <![CDATA[
       function pageLoaded()
       {
         document.formA.attributeValue.focus();  
       }
       // To add the selected filter criteria in filter criteria table.
       
       function addFilterCriteria()
       {
         if(document.formA.attributeValue.value != "")
         {
           var tbody = document.getElementById("dtlResults").getElementsByTagName("tbody")[0];
           var row = document.createElement("tr");
           var cell = document.createElement("td");
           cell.innerHTML = "<span class='v7b' style='width:35px;VERTICAL-ALIGN: top'>";
           var chkBox =  document.createElement("input");
           chkBox.setAttribute('type','checkbox');
           chkBox.setAttribute('name','edit');
           cell.appendChild(chkBox);
           cell.innerHTML = "Hello";
           cell.innerHTML = "</span>";
           cell.innerHTML = "<span class='v7b' style='width:150px;VERTICAL-ALIGN: top'>";
           cell.innerHTML = document.formA.attribute.value+" "
                           +document.formA.operator.value+" "
                           +document.formA.attributeValue.value;
           cell.innerHTML = "</span>"
           row.appendChild(cell);
           tbody.appendChild(row);      
           alternateColor();
           document.formA.attributeValue.value = "";
         }
       }
       // To display alternate color for the rows in filter criteria table.
       function alternateColor()
       {
         var tbl = document.getElementById('filterTableBody');
           
         for(i = 0; i < tbl.rows.length; i++)
         {          
           if(i % 2 == 0)
           {        
               
             tbl.rows.bgColor = "white";
           }
           else
           {
             tbl.rows.bgColor = "LightGrey";
           }      
         }
       }
       
       // To select all the rows (checkboxes) in the filter criteria table.
       function selectAll()
       {        
         for (var i = 0; i <document.formA.edit.length; i++)
         document.formA.edit.checked = true;
       }
       
       // To remove the selected rows in the filter criteria table.
       function removeSelected()
       {
         var tbl = document.getElementById('filterTableBody');
                     
         for (var i = 0; i < tbl.rows.length; i++)
         {        
           if(document.formA.edit.checked)
           {        
             tbl.deleteRow(i);        
             i-1;
           }
         }    
         alternateColor();
       }
     ]]>
     </xsl:comment>
     </script>


    </xsl:template>


    <xsl:template match="View">
     <xslaram name="imgBaseUrl" select="''"/>


     <xsl:variable name="fileName" select="../View/FileSelect/filename"/>
       <xsl:variable name="fileDt" select="../View/FileSelect/filedate"/>
       <xsl:variable name="fileComment" select="../View/FileSelect/comment"/>
       <xsl:variable name="fileAuthor" select="../View/FileSelect/author"/>


     <TABLE id="Table1" cellSpacing="0" cellPadding="0" height="100%" width="100%" border="0" class="tbllb">
       <thead>
         <TR>
       <TD style="HEIGHT: 22px" colSpan="2">Current File</TD>
         </TR>
       </thead>
       <tbody>
         <TR>
       <TD  width="75px" vAlign="top" align="right">Name: </TD>
       <TD align="left" vAlign="top" ><xsl:value-of select="$fileName"/></TD>
         </TR>
         <TR>
       <TD  vAlign="top" align="right">Date: </TD>
       <TD vAlign="top" ><xsl:value-of select="$fileDt"/></TD>
         </TR>
         <TR>
       <TD vAlign="top" align="right">Comment: </TD>
       <TD vAlign="top" ><xsl:value-of select="$fileComment"/></TD>
         </TR>
         <TR>
       <TD  vAlign="top" align="right">Author: </TD>
       <TD vAlign="top" ><xsl:value-of select="'vz86k2'"/></TD>
         </TR>
         <TR>
       <TD style="HEIGHT: 22px" colSpan="2"> </TD>
         </TR>
        </tbody>
     </TABLE>
     <TABLE cellSpacing="0" cellPadding="0" height="100%" width="100%" border="0">
       <TR>
         <TD>


     <TABLE cellSpacing="0" cellPadding="0" height="100%" width="100%" border="0" class="tbllb">
       <thead>
         <TR>
       <TD style="HEIGHT: 22px" colSpan="2"><xsl:value-of select="'Select Filter Criteria'"/></TD>
         </TR>
       </thead>
       <tbody>
         <TR>
           <TD style="HEIGHT: 27px" align="right">Select Attribute: </TD>
           <TD>
               <select name="attribute" size="1">
                 <xsl:for-each select="../View/Attributes/Attribute">              
                     <xsl:element name="option">
                     <!--<xsl:attribute name="value">
                       <xsl:value-of select="AttributeID" />    
                     </xsl:attribute>-->
                     <xsl:attribute name="value">
                       <xsl:value-of select="AttributeAlias" />    
                     </xsl:attribute>                
                       <xsl:value-of select="AttributeName" />  (<xsl:value-of select="AttributeAlias" /&gt
                   </xsl:element>    
                 </xsl:for-each>
               </select>
           </TD>
         </TR>
         <TR>
           <TD style="HEIGHT: 27px" align="right">Select Operator: </TD>
           <TD>
               <select name="operator" size="1">
                 <option value="=">=</option>
                 <option value="!=">!=</option>
                 <option value="<"><</option>
                 <option value=">">></option>
                 <option value="<="><=</option>
                 <option value=">=">>=</option>
                 <option value="INCLUDE">INCLUDE</option>
                 <option value="EXCLUDE">EXCLUDE</option>
               </select>
           </TD>
         </TR>
         <TR>
           <TD style="HEIGHT: 27px" align="right">Enter Value: </TD>
           <TD>
               <input type="text" name="attributeValue" value="" size="20"/>
           </TD>
         </TR>
         <TR>
           <TD/>
           <TD style="HEIGHT: 32px" align="left">
             <a class="button" href="javascript:addFilterCriteria()">
               <font class="v8w"> ADD FILTER CRITERIA </font>
             </a>
           </TD>
         </TR>


         <TR>
           <TD colspan="2" style="HEIGHT: 11px"/>
         </TR>
       </tbody>
     </TABLE>


     </TD>
     <TD>


     <TABLE cellSpacing="0" cellPadding="0" height="100%" width="100%" border="0" class="tbllb">
       <thead>
         <TR>
       <TD style="HEIGHT: 22px" colSpan="2"><xsl:value-of select="'Filter Criteria'"/></TD>
         </TR>
       </thead>
       <tbody>
         <TR>
         <TD valign="top" align="left">  
       <div id="d1" style=" OVERFLOW-Y: scroll; OVERFLOW: scroll; WIDTH: 375px; HEIGHT: 200px">
         <div id="d2" style=" OVERFLOW:visible; WIDTH:425px">
           <table id="dtlResults" cellspacing="0" cellpadding="3" rules="cols" bordercolor="#999999" border="1" style="color:Black;background-color:White;border-color:#999999;border-width:1px;border-styleolid;border-collapse:collapse;">
           <tHead>  
             <tr>
           <td style="color:White;background-color:LightGrey;font-weight:bold;">
             <span class="v7bbold" style="width:35px;VERTICAL-ALIGN: top">Select</span>
             <span class="v7bbold" style="width:150px;VERTICAL-ALIGN: top">Filter</span>
           </td>
             </tr>
           </tHead>
           <tbody id="filterTableBody">  


           </tbody>
       
      </table>
         </div>
       </div>
         </TD>
         </TR>


         <TR>
           <TD colspan="2" style="HEIGHT: 11px"/>
         </TR>


         <TR>
       <TD colspan="2" style="HEIGHT: 27px" vAlign="top" align="center">
             <a class="button" href="javascript:selectAll()">
               <font class="v8w"> SELECT ALL </font>
             </a> 
             <a class="button" href="javascript:removeSelected()">
               <font class="v8w"> REMOVE SELECTED </font>
             </a>
           </TD>
         </TR>


         <TR>
           <TD colspan="2" style="HEIGHT: 11px"/>
         </TR>
       </tbody>
     </TABLE>  


     </TD>
     </TR>
     </TABLE>



    <!--
         <xsl:call-template name="Criteria">
           <xsl:with-param name="addSectionTitle" select="'Select Filter Criteria'"/>
           <xsl:with-param name="tableSectionTitle" select="'Filter Criteria'"/>
         </xsl:call-template>
    -->
       
         
         <xsl:variable name="cStartRowId" select="../Model/Session/ResultSetPagingManager/@cStartRowId"/>
         <xsl:variable name="cEndRowId" select="../Model/Session/ResultSetPagingManager/@cEndRowId"/>
         <xsl:variable name="nRows" select="../Model/Session/ResultSetPagingManager/@nRows"/>
         <xsl:variable name="cPageNumRows" select="../Model/Session/ResultSetPagingManager/@cPageNumRows"/>
         <xsl:variable name="firstB" select="../Model/Session/ResultSetPagingManager/@firstB"/>
         <xsl:variable name="lastB" select="../Model/Session/ResultSetPagingManager/@lastB"/>
         <xsl:variable name="nextB" select="../Model/Session/ResultSetPagingManager/@nextB"/>
         <xsl:variable name="prevB" select="../Model/Session/ResultSetPagingManager/@prevB"/>
       
     <table id="tblResults" class="tbllb" width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <TD><font class="v7aquaABoldItalic">File Data</font></TD>
       </tr>
       <tr>
         <TD valign="top" align="left">
           <TABLE id="Table1" border="0" class="tbllb" cellspacing="0" style="PADDING-RIGHT: 0px;PADDING-LEFT: 0px;PADDING-BOTTOM: 0px;PADDING-TOP: 0px">
         <tbody>
           <TR>
                 <TD align="center" valign="top" nowrap="true">
                   <font class="v7b">Displaying range </font>
                   <b><span id="paginglblBegin"><xsl:value-of select="$cStartRowId"/></span></b><font class="v7b"> to </font>
                   <b><span id="paging    lblEnd"><xsl:value-of select="$cEndRowId"/></span></b><font class="v7b"> of </font>
                   <b><span id="paginglblCount"><xsl:value-of select="$nRows"/></span></b><font class="v7b"> records.  </font>
           <span id="paging    lblPageNumber" class="v7b">Number of Record per Page:</span>
           <select name="pageNumRows" onchange="changeRowsPerPage()" language="javascript" id="rowsPerPage">
                 <option value="10">10</option>
                 <option value="20">20</option>
                 <option value="30">30</option>
                 <option value="40">40</option>
                 <option value="50">50</option>
           </select> <br/>
                     <xsl:if test="$firstB = 'true'">
             <a class="button" href="javascript:selectPage('firstPage')">
             <font class="v8w"> << First Page </font></a> 
           </xsl:if>
           <xsl:if test="$prevB = 'true'">    
             <a class="button" href="javascript:selectPage('prevPage')">
             <font class="v8w"> < Previous Page </font></a> 
           </xsl:if>
           <xsl:if test="$nextB = 'true'">  
             <a class="button" href="javascript:selectPage('nextPage')">
             <font class="v8w"> Next Page >> </font></a> 
           </xsl:if>
           <xsl:if test="$lastB = 'true'">  
             <a class="button" href="javascript:selectPage('lastPage')">
             <font class="v8w"> Last Page >> </font></a> <br/>
           </xsl:if>  
             <a class="button" href="javascript:delete('delete')">
             <font class="v8w"> Delete Selected </font></a> 
             <a class="button" href="javascript:save('save')">
             <font class="v8w"> Save </font></a> 
             <a class="button" href="javascript:copy('copy')">
             <font class="v8w"> Copy Selected </font></a>         
                 </TD>        
           </TR>
         </tbody>
           </TABLE>
         </TD>
       </tr>
       <tr>
         <TD valign="top" align="left">  
       <div id="d1" style=" OVERFLOW-Y: scroll; OVERFLOW: scroll; WIDTH: 650px; HEIGHT: 250px">
         <div id="d2" style=" OVERFLOW:visible; WIDTH:1125px">
           <table id="dtlResults" cellspacing="0" cellpadding="3" rules="cols" bordercolor="#999999" border="1" style="color:Black;background-color:White;border-color:#999999;border-width:1px;border-styleolid;border-collapse:collapse;">
             <tr>
           <td style="color:White;background-color:LightGrey;font-weight:bold;">
             <span class="v7bbold" style="width:25px;VERTICAL-ALIGN: top"> </span>
             <span class="v7bbold" style="width:25px;VERTICAL-ALIGN: top">#</span>
             <xsl:for-each select="../View/Attributes/Attribute">  
                   <span class="v7bbold" style="VERTICAL-ALIGN: top"><xsl:value-of select="AttributeName" />    </span>
                 </xsl:for-each>
             </td>
             </tr>
                 <xsl:apply-templates select="FileDataResultSet/FileData">
                   <xsl:with-param name="imgBaseUrl" select="$imgBaseUrl"/>
                 </xsl:apply-templates>  
             </table>
         </div>
       </div>
         </TD>
       </tr>
     </table>


    </xsl:template>


    <xsl:template match="FileData">
     <xslaram name="imgBaseUrl" select="''"/>


       <xsl:variable name="id" select="id"/>
       <xsl:variable name="cva" select="cva"/>
       <xsl:variable name="driModelRange" select="rng"/>
       <xsl:variable name="driModelVariant" select="var"/>
       <xsl:variable name="driPlatform" select="plat"/>
       <xsl:variable name="driProdBRand" select="brnd"/>
       <xsl:variable name="driVehMan" select="man"/>
       <xsl:variable name="marketArea" select="area"/>
       <xsl:variable name="modelRun" select="run"/>
       <xsl:variable name="vehType" select="type"/>
       <xsl:variable name="year" select="yr"/>
       <xsl:variable name="volume" select="vol"/>


       <xsl:variable name="row" select="(position() mod 2)"/>


       <tr>
         <td>
           <xsl:attribute name="style">
             <xsl:choose>
               <xsl:when test="$row = 0">
                 <xsl:value-of select="'background-color:#CCCCCC;'"/>
               </xsl:when>
               <xsltherwise>
                 <xsl:value-of select="'background-color:#FFFFFF'"/>
               </xsltherwise>
             </xsl:choose>
           </xsl:attribute>
         <span class="v7b" style="width:25px;VERTICAL-ALIGN: top"><input type="checkbox"/></span>
         <span class="v7b" style="width:25px;VERTICAL-ALIGN: top"><xsl:value-of select="$id"/></span>
         <span class="v7b" style="width:50px;VERTICAL-ALIGN: top"><xsl:value-of select="$cva"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$driModelRange"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$driModelVariant"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$driPlatform"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$driProdBRand"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$driVehMan"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$marketArea"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$modelRun"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$vehType"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$year"/></span>
         <span class="v7b" style="width:100px;VERTICAL-ALIGN: top"><xsl:value-of select="$volume"/></span>
          </td>
        </tr>


    </xsl:template>



    </xsl:stylesheet>

    Report abuse
  • 4 years ago

    Firstly put your code in code tags please, it makes it more readable.


    Ok looks like your overwriting the innerHTML each time here:


    Code:
           cell.innerHTML = "Hello";
          cell.innerHTML = "</span>";
          cell.innerHTML = "<span class='v7b' style='width:150px;VERTICAL-ALIGN: top'>";
          cell.innerHTML = document.formA.attribute.value+" "
                          +document.formA.operator.value+" "
                          +document.formA.attributeValue.value;
          cell.innerHTML = "</span>"


    try something like:


    Code:

    var strHTML;
    strHTML = cell.innerHTML;
    strHTML = strHTML +  "Hello";
    strHTML = strHTML + "</span>";
    strHTML = strHTML + "<span class='v7b' style='width:150px;VERTICAL-ALIGN: top'>";
    strHTML = strHTML + document.formA.attribute.value+" "
                          +document.formA.operator.value+" "
                          +document.formA.attributeValue.value;
    strHTML = strHTML +"</span>"
    cell.innerHTML = strHTML

    Report abuse
  • 4 years ago

    how do i get the informations on the server side when the page is posted. i am using ASP. And javascript on the client side. The code is similar to yours.
    plz help me.


    Sandeepan Kundu

    Report abuse
  • 4 years ago

    Using the Request object.


    If you had a textbox in your ASP page with a name or id attribute of "text1" for example, you retreive it's value from the post thus:


    Code:

    Dim strText


    strText = Request.Form("text1")

    Report abuse
  • 4 years ago

    i need code in dynamically adding , deleting,editing after each row
    row should dynamically keep on increasing base on adding button
    i need code javascript

    Report abuse
  • 4 years ago
    Just add a delete function to my code above. Here you go:

    Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Insert/Delete Table Row using DOM</title>
    <script language="javascript">
    var gRowId = 2;

    function delRow(button)
    {
    var row = button.parentNode.parentNode;
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
    tbody.removeChild(row);
    }

    function addRow()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

    var row = document.createElement('TR');

    var cell1 = document.createElement('TD');
    var cell2 = document.createElement('TD');
    var cell3 = document.createElement('TD');

    var inp1 =  document.createElement('INPUT');
    var inp2 = document.createElement('INPUT');

    inp1.setAttribute('type','text');
    inp1.setAttribute('value','New row');
    inp2.setAttribute('type','button');
    inp2.setAttribute('value','Delete');
    inp2.onclick=function(){delRow(this);}

    cell1.innerHTML = gRowId;
    cell2.appendChild(inp1);
    cell3.appendChild(inp2);

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);

    tbody.appendChild(row);

    gRowId++;
    }
    </script>

    </head>
    <body>
    <table id="table1">
    <tbody>
    <tr>
    <th>ID</th><th>Data</th><th>Action</th>
    </tr>
    <tr>
    <td>1</td>
    <td><input type=text value="Original Row"></td>
    <td><input type="button" value="Delete" onClick="delRow(this);" /></td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="Insert Row" onClick="addRow();">
    </body>
    </html>
    Report abuse
  • 4 years ago
    thanks 4 ur reply. but the problem is i am genarating rows dynamically at client side. how to i get to know about the client side objects in server.
     Say I have genarated a row consisting  of 2 column having input box iin each. when i post the data how do i reference to that object

    hellosibba
    Report abuse
  • 4 years ago

    See my post further up. You use the Request object. In the page that is the form you have a form tag something like this:


    Code:

    <form name="myform" method="post" action="somepage.asp">


    When the the form is submited all HTML controls (including your dynamically created textboxes) are serialised and sent to the server in an HTTP POST message by the client browser. Now you cannot know in advance how many textboxes the user is going to fill out. To handle this you need to set the Name attribute of each textbox when it's created to be the same, they will then be serialised as an array through which you can iterate serverside. here is the updated code for the form:


    Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Insert/Delete Table Row using DOM</title>
    <script language="javascript">
    var gRowId = 2;


    function delRow(button)
    {
    var row = button.parentNode.parentNode;
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
    tbody.removeChild(row);
    }


    function addRow()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];


    var row = document.createElement('TR');


    var cell1 = document.createElement('TD');
    var cell2 = document.createElement('TD');
    var cell3 = document.createElement('TD');


    var inp1 =  document.createElement('INPUT');
    var inp2 = document.createElement('INPUT');


    inp1.setAttribute('type','text');
    inp1.setAttribute('name','usertxt');
    inp1.setAttribute('value','New row');
    inp2.setAttribute('type','button');
    inp2.setAttribute('value','Delete');
    inp2.onclick=function(){delRow(this);}


    cell1.innerHTML = gRowId;
    cell2.appendChild(inp1);
    cell3.appendChild(inp2);


    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);


    tbody.appendChild(row);


    gRowId++;
    }
    </script>


    </head>
    <body>
    <form name="myform" method="post" action="txtiterator.asp">
    <table id="table1">
    <tbody>
    <tr>
    <th>ID</th><th>Data</th><th>Action</th>
    </tr>
    <tr>
    <td>1</td>
    <td><input name="usertxt" type=text value="Original Row"></td>
    <td><input type="button" value="Delete" onClick="delRow(this);" /></td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="Insert Row" onClick="addRow();">
    <input type="submit" name="submit" value="Submit">
    </form>
    </body>
    </html>



    I have added a form tag that directs the post to an asp page txtiterator.asp, I also added a line in the javascript function which gives each new textbox the name 'usertxt', and then finally a submit button.



    so then serverside in txtiterator.asp you have:


    Code:

    <%@ Language=VBScript %>
    <%Option Explicit


    Dim strUserTxt, iInputs, iLoop


    iInputs = Request.Form("usertxt").Count


    For iLoop = 1 To iInputs
       Response.Write Request.Form("usertxt")(iLoop) & "<br />"
    Next
    %>


    Report abuse
  • 4 years ago


    Thanks hollystyle.
    Thanks a lot.


    Sandeepan

    Report abuse
  • 4 years ago

    hi hollystyles
    i have seen ur code and used it it is working fine but i want to delete dynamically created rows using checkbox i.e. the one which are checked by the user and then telete all of them in one go from a single delete button.
    please help me it is urgent
    thanks
    vivek

    Report abuse
  • 4 years ago

    Hi  HollyStyles
    I  would just like to know this


    code:


    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];


    what  does this  0  means

    Report abuse
  • 4 years ago

    Sheeba


    The 0 is the first tbody element in the Table element with ID 'table1'
    the method getElementsByTagName returns a reference to an array of
    elements with the same tag type. So specifying 0 ensures we get the one
    we want.


    vivpro


    I have amalgamated all the code into an article on my site here as since I replied to this thread I have had no end of mails to my inbox asking for code to do it this way and that way etc.. and it's starting to become an unapid job!


    The article covers everything from adding rows to deleting them and moving them around.

    Report abuse
  • 4 years ago

    Thanx

    Report abuse
  • 4 years ago

    thanks hollystyle.


    thanks a lot.


    but there is one problem which i am facing now is the text boxes in the dynamically created row remain editable. i have tried to .setattribute readonly true but it is not working and I have also tried disabled true but then I didn’t get values of these textboxes  on submitting, can u please suggest me, how to make them readonly. i also came to know that this property is not supported by jscript, is it true? Then how can we achieve this readonly status.


    once again thanks a lot


    vivek

    Report abuse
  • 4 years ago

    hollystyle


    i have found solution to my problem of readonly i have to use
    someElement.readOnly = true;


    vivek

    Report abuse
  • 4 years ago

    Hi everyone!


    Great code, thanks.


    I need to put a SELECT with its options inside of a TD of each row I add. How can this be achieved?


    Thanks again.
    Adrian

    Report abuse
  • 4 years ago

    Hi...


    Since I found it nowhere, I try something rather "intuitive", hehehe, and it worked!


    Code:

    ' create the SELECT
    var inp3 = document.createElement('SELECT');
    inp3.setAttribute('name','cmbMyFirstCombo');


    ' create some OPTION objects
    ' (I got this code from an example of Bruce Johnson, here in
    ' developerfusion http://www.developerfusion.co.uk/show/2155 )
    var anOption1 = document.createElement("OPTION");
    anOption1.innerText = "One";
    anOption1.Value = "1";
    var anOption2 = document.createElement("OPTION");
    anOption2.innerText = "Two";
    anOption2.Value = "2";


    ' Add OPTIONs to the SELECT
    inp3.options.add(anOption1);
    inp3.options.add(anOption2);



    HTH.
    Adrian

    Report abuse
  • 4 years ago

    Wow this post and code snippet has attracted so much attention it's almots an open source project !

    Report abuse
  • 4 years ago

    Hi Holly.. very funny!


    Well, now I've got another rocket-scientist question. (I am just a newbie in these DOM things... you maybe noticed it )


    Suppose my page is loaded in the browser with its JavaScript code for creating rows with selects inside, etc... and that the user has already created some rows.


    On one of those rows there is a checkbox in the first TD, and a Select and a TextField in the second TD.


    I want to change the content of the TextField according to the state of the CheckBox.


    When cretaing the CheckBox with DOM I associate a function to its OnClick like this.


    Code:
    var inp1 =  document.createElement('INPUT');    // checkbox
    inp1.setAttribute('type','checkbox');
    inp1.setAttribute('name','chkBorrar');
    inp1.setAttribute('value','0');
    inp1.onclick=function(){ChangeTextFieldValue(this);}


    And I've made a small function to at least change the content of the TextField, without paying attention to the ChekBox state, but it doesn't work:


    Code:
    function ChangeTextFieldValue(chkBox)
    {
       chkBox.parentNode.parentNode.getElementsByTagName('TD')[1].childNodes[1].value = "Changed!";
    }


    I also have tried this as the function, but didn't work.


    Code:
    function ChangeTextFieldValue(chkBox)
    {
       chkBox.parentNode.parentNode.getElementsByTagName('TD')[1].childNodes[1].setAttribute('value','Changed!');
    }


    Can you please feed me with your wisDOM and tell me why is it not working?


    Thanks.
    Adrian

    Report abuse
  • 4 years ago
    hi

    iam having a table ganerated dynamically by addrow function.

    Now my table has rows like 1,2,3 and so...........i want to insert a new row inbetween 2 and 3 so that the 3 row shifts down and in its place a textbox appears n have that value.

    ihad tried by displaying a box,where user enters a row number and when clicked on insert button,there must be the field added,but i am able to print the text there n not the txtbox.

    iam writing the coding here pls tell me what to do.

    its urgent.thanks

    <html><head><title>report</title>
    <script type="text/javascript">
    var INPUT_NAME_PREFIX = 'inputName';
    var INPUT_NAME_PREFIX2 = 'inputText';
    var TABLE_NAME = 'tblSample';
    var headerRows;

    window.onload=fillInRows;

    function fillInRows()
    {
       headerRows = document.getElementById(TABLE_NAME).rows.length;
       addRowToTable('this could be set to something but I don\'t currently use it in addRowToTable');
       addRowToTable();
    }

    // CONFIG:
    // myRowObject is an object for storing information about the table rows
    function myRowObject(one, two, three)
    {
    //this.zero = zero; // text object
    this.one = one; // input text object
    this.two = two; // textarea object
    this.three = three; // delete button object
    //this.four = four; // input checkbox
    }
    function addRowToTable(val)
    {
       var tbl = document.getElementById(TABLE_NAME);
            var nextRow = tbl.rows.length;
            var iteration = nextRow - parseInt(headerRows) + parseInt(1);

       // add the row
       var row = tbl.insertRow(nextRow);

       // CONFIG: This whole section can be configured

        // cell 0 - text
            var cell0 = row.insertCell(0);
            var textNode = document.createTextNode(iteration);
            //cell0.appendChild(textNode);

        // cell 1 - input text
        var cell1 = row.insertCell(1);
            var txtInp = document.createElement('input');
            txtInp.setAttribute('type', 'text');
            txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
            txtInp.setAttribute('size', '6');
    txtInp.setAttribute('value', ''); // iteration included for debug purposes
       cell1.appendChild(txtInp);

        // cell 2 - textarea
            var cell2 = row.insertCell(2);
            var txtAr = document.createElement('textarea')
            txtAr.setAttribute('rows','4');
            txtAr.setAttribute('cols','50');
              txtAr.setAttribute('name',INPUT_NAME_PREFIX2 + iteration);
        txtAr.setAttribute('id','newid');
            //txtAr.setAttribute('value','Objectives:');

       cell2.a//cell 3 - input button
       var cell3 = row.insertCell(3);
        var btnE1 = document.createElement('input');
        btnE1.setAttribute('type','button');
        btnE1.setAttribute('value','Delete Objective');
        btnE1.onclick = function () {deleteCurrentRow(this) };
        cell3.appendChild(btnE1);

        // cell 4 - input checkbox
        //var cell4 = row.insertCell(4);
            //var cbEl = document.createElement('input');
            //cbEl.setAttribute('type', 'checkbox');
            //cell4.appendChild(cbEl);

        // Pass in the elements you want to reference later
            // Store the myRow object in each row
            row.myRow = new myRowObject(txtInp, txtAr);
    }

    function insertRow(TABLE_NAME, txtIndex, txtError)
    {
    var tbl= document.getElementById(TABLE_NAME);
    var rowIndex = document.getElementById(txtIndex).value;
    try {
    var newRow = tbl.insertRow(rowIndex);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '';
    var newCell2 = newRow.insertCell(1);
    newCell2.innerHTML = 'add';
    }
    catch(ex) {
    document.getElementById(txtError);
    }  }
    function deleteCurrentRow(obj)
    {
       var delRow = obj.parentNode.parentNode;
            var tbl = delRow.parentNode;
            var rIndex = delRow.rowIndex;
            var rowArray = new Array(delRow);
            deleteRows(rowArray);
            reorderRows(tbl, rIndex);
    }

    function reorderRows(tbl, startingIndex)
    {
       if (tbl.rows[startingIndex]) {
                   var count = startingIndex;
                   for (var i=startingIndex; i<tbl.rows.length; i++) {

               // CONFIG: next line is affected by myRowObject settings                //tbl.rows.myRow.one.data = count; // text

               // CONFIG: next line is affected by myRowObject settings         //tbl.rows.myRow.two.name = INPUT_NAME_PREFIX + count; // input text
               // CONFIG: next line is affected by myRowObject settings        //var tempVal = tbl.rows.myRow.two.value.split(' '); // for debug purposes
       tbl.rows.myRow.three.name = INPUT_NAME_PREFIX2 + count; // textarea

         var tempVal2 = tbl.rows.myRow.three.value.split(' '); // for debug purposes

               count++;
               }
           }
    }

    function deleteRows(rowObjArray)
    {
       for (var i=0; i<rowObjArray.length; i++) {
                   var rIndex = rowObjArray.rowIndex;
                   rowObjArray.parentNode.deleteRow(rIndex);
           }
    }

    </script>
    </head>
    <body>
    <form>
    <table border=5 id="tblSample">
    <tr>
    <th colspan=6>Objective</th>
    </tr>
    <p>
    </table>
    <br><br>

    <input type="button" value="Add Objective" onclick="addRowToTable();" />
    <input type="button" value="Insert #" onclick="insertRow('tblSample', 'txtInsertIndex', 'errorMessage');" />
    <input type="text" id="txtInsertIndex" size="2" value="0" />

    </p>
    </form>
    </body></html>

    now tell me how can i insert



    Report abuse
  • 3 years ago

    Hi Hollystyles,

    I modified ur code to use <textarea> but I don't get the content of rows when the form is submitted except the content of the first row. Here's is my code.

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Insert/Delete Table Row using DOM</title>

    var gRowId = 2;

    function delRow(button)
    {
    var row = button.parentNode.parentNode;
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
    tbody.removeChild(row);
    }

    function addRow()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

    var row = document.createElement('TR');

    var cell1 = document.createElement('TD');
    var cell2 = document.createElement('TD');
    var cell3 = document.createElement('TD');

    var inp1 = document.createElement('TEXTAREA');
    var inp2 = document.createElement('INPUT');


    inp1.setAttribute('cols','70');
    inp1.setAttribute('rows','5');
    inp1.setAttribute('name','Keyobj');
    inp1.setAttribute('value','New row');
    inp2.setAttribute('type','button');
    inp2.setAttribute('value','Delete');
    inp2.onclick=function(){delRow(this);}

    cell1.innerHTML = gRowId;
    cell2.appendChild(inp1);
    cell3.appendChild(inp2);

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);

    tbody.appendChild(row);

    gRowId++;
    }


    Server side


















































    <%@ Language=VBScript %>
    <%Option Explicit

    Dim strUserTxt, iInputs, iLoop

    iInputs = Request.Form("Keyobj").Count

    For iLoop = 1 To iInputs
       Response.Write Request.Form("Keyobj")(iLoop) & "<br />"
    Next

    %>

     

    Report abuse
  • 3 years ago
    Hi Sammy,

    Please can you supply the whole of the html for your form page so I can expiriment with it here. I can't see anything wrong with your code so far, I'm abit rusty on ASP as I havn't been doing that for a while.





    Report abuse
  • 3 years ago

    Hi HollyStyles,

    Thanks for the response. I just found out that the code works fine. The error was coming from a misplaced HTML tag on the page which I have corrected.

    Thanks for the effort

     

    Report abuse
  • 3 years ago

    Hi Hollystyles,

    Pls help me with this code. I want to dynamically create rows containing textarea, select & input areas as indicated in the picture below.

     

     

    Script:

    <script language="javascript">
    var gRowId = 2;

    function delRow(button)
    {
    var row = button.parentNode.parentNode;
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
    tbody.removeChild(row);
    }
    function addRow()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];







    var row = document.createElement('TR');

    var cell1 = document.createElement('TD');
    var cell2 = document.createElement('TD');
    var cell3 = document.createElement('TD');

    var inp1 =  document.createElement('SELECT');
    var inp2 = document.createElement('INPUT');


    inp1.setAttribute('size','1'); 
    inp1.setAttribute('name','Ref/Ind');


    inp2.setAttribute('type','button');
    inp2.setAttribute('value','Delete');
    inp2.onclick=function(){delRow(this);}


    cell1.innerHTML = gRowId;
    cell2.appendChild(inp1);

    cell3.appendChild(inp2);

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);

    tbody.appendChild(row);

    gRowId++;
    }
    </script>
    <script language="javascript">
    var gRowId1 = 2;



    function delRow1(button)
    {
    var row1 = button.parentNode.parentNode;
    var tbody1 = document.getElementById('table11').getElementsByTagName('tbody')[0];
    tbody1.removeChild(row1);
    }
    function addRow1()
    {
    var tbody1 = document.getElementById('table11').getElementsByTagName('tbody')[0];







    var row1 = document.createElement('TR');

    var cell11 = document.createElement('TD');
    var cell21 = document.createElement('TD');
    var cell31 = document.createElement('TD');

    var inp11 =  document.createElement('TEXTAREA');
    var inp21 = document.createElement('INPUT');


    inp11.setAttribute('cols','40');
    inp11.setAttribute('rows','5'); 
    inp11.setAttribute('name','jobres');
    inp11.setAttribute('value','New row');
    inp21.setAttribute('type','button');
    inp21.setAttribute('value','Delete');
    inp21.onclick=function(){delRow1(this);}






    cell11.innerHTML = gRowId1;
    cell21.appendChild(inp11);
    cell31.appendChild(inp21);

    row1.appendChild(cell11);
    row1.appendChild(cell21);
    row1.appendChild(cell31);

    tbody1.appendChild(row1);

    gRowId1++;
    }
    </script>

     

    html:

    <table id="table11" border="3" bordercolor="#A4B2BC" bgcolor="#C1D0C2">
    <tbody>
    <tr>
    <th width="18"><font color="#990033" face="Verdana" size="2">ID</font></th><th width="400" bgcolor="#C1D0C2"><font color="#990033" face="Verdana" size="2">Activity</font></th><th width="64"><font color="#990033" face="Verdana" size="2">Action by</font></th><th width="120"><font color="#990033" face="Verdana" size="2">Target Date</font></th><th width="64"><font color="#990033" face="Verdana" size="2">Action</font></th>
    </tr>
    <tr>
    <td width="18">1</td>
    <td width="400"><textarea name="jobres" cols="40" rows="5" value="Original Row" ></textarea></td>
    <td width="50"><table id="table1">
    <tbody>
    <tr>
    <th>ID</th><th>Ref/Ind</th><th>Action</th>
    </tr>
    <tr>
    <td>1</td>
    <td id="td1"><select name="ref/ind" size="1"><option value= selected> </option>
                                        <%while NOT rsData2.EOF%>
                    <option value="<%=rsData2("ref/ind")%>"><%=rsData2("ref/ind")%></option>
                    <%rsdata2.MoveNext
    wend
    rsData2.Close %></td>
    <td><input type="button" value="Delete" onClick="delRow(this);"></td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="Insert Row" onClick="addRow();"> </td>
    <td width="20" valign="top"><font face="Arial" size="1" color="#FF0000">Use Date Picker</font><b><font size="2" face="Arial"><br>
                                            <input type="text" name="DateDep" size="8"></font></b><a href="BLOCKED SCRIPTshow_calendar('document.myform.DateDep', document.myform.DateDep.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a></td>
    <td width="64"><input type="button" value="Delete" onClick="delRow1(this);"></td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="Insert Row" onClick="addRow1();"></td>
                                      </tr>
                                      <tr>
                                        <td valign="top"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">&nbsp;</font></td>
                                       
                                      </tr>
                                     
                                      <tr>
                                        <td valign="top"><INPUT type=submit value='Submit For Processing'></td>







































     

    Report abuse
  • 3 years ago
    Hello,
         Can we embedd the entered values into XML. I mean we enter the value in the text field and it should embedd in the XML. Can i get the XML structure what it would look like.




    Report abuse
  • 2 years ago

    You can add row by using these code.

    var x=document.getElementById('table1').insertRow(0)
    var y=x.insertCell(0)
    y.innerHTML="Message";

    Report abuse
  • 2 years ago

    Hello,

    I used this code this is working fine in IE. But if i am trying this in Mozilla then it works but i am not able to get post values on submitting the form. I am PHP. But it mozzila not considering these newly added textfields as a form element. 

    Can you help me...  I am really getting frustated of this....

     

     

    Report abuse
  • 2 years ago

    Could you post your working code? thanks

    Report abuse
  • 2 years ago
    Looks like a nice piece of code - but I`m having some major problems trying to read the values entered in PHP - the asp code looks like it reads using a loop but I have no idea how to get it working with PHP

    I`ve tried print_r($_POST); to see if any values/variables are being sent but there are none, not even the names of the newly added rows.

    Help would be appreciated, I`ve run into a brick wall here.





    Report abuse
  • 2 years ago
    Hi, I wanted to ask that as the text box are dynamically creating, Is it possible to create combo box? I want to create two combo box in a row. Such that on selecting a value in one(State), the other gets filled up with corresponding City Values. I am using JSP. I have attached a part of code. The problem is that when I select 'state' in second row, cities in first column are not coming and giving JavaScript error. //contains option -- Select -- var tbody; function addAddressRow() { tbody = document.getElementById("myadTable").getElementsByTagName("tbody")[0]; var row = document.createElement("TR"); var cell1 = document.createElement("TD"); cell1.innerHTML = document.getElementById("td1").innerHTML ; var cell2 = document.createElement("TD"); cell2.innerHTML = document.getElementById("td2").innerHTML ; var cell3 = document.createElement("TD"); cell3.innerHTML = document.getElementById("td3").innerHTML ; var cell4 = document.createElement("TD"); cell4.innerHTML = document.getElementById("td4").innerHTML ; var cell5 = document.createElement("TD"); cell5.innerHTML = document.getElementById("td5").innerHTML ; var cell6 = document.createElement("TD"); cell6.innerHTML = document.getElementById("td6").innerHTML ; var cell7 = document.createElement("TD"); cell7.innerHTML = document.getElementById("td7").innerHTML ; var cell9 = document.createElement("TD"); var len = document.all.myadTable.rows.length-2; cell9.innerHTML = " "; cell9.align = "center"; row.appendChild(cell1); row.appendChild(cell2); row.appendChild(cell9); row.appendChild(cell3); row.appendChild(cell4); row.appendChild(cell5); row.appendChild(cell6); row.appendChild(cell7); tbody.appendChild(row); } var optIndexValue = ""; function getValue(optIndex) { createRequest(); optIndexValue = optIndex; var State = document.forms[0].States.options[document.forms[0].States.selectedIndex].value; http.open("GET", "/system/getOptions.jsp?optIndex="+optIndex+"&States="+State, true); http.onreadystatechange = handleHttpResponse; http.send(null); } function createRequest(){ try { http = new XMLHttpRequest(); } catch(e) { try { http = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { http = false; } } } } function handleHttpResponse() { if (http.readyState == 4) { if(optIndexValue=="OPT0"){ document.getElementById("td6").innerHTML=http.responseText; } } } function resetStates(){ document.getElementById("td6") .innerHTML = "Select"; }
    Report abuse

Post a reply

Enter your message below

Sign in or Join us (it's free).

Ask a question

Related discussion

Quick links

Recent activity

Cancel
We'd love to hear what you think! Submit ideas or give us feedback