Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

Adding a new row to a dynamic table using a div tag

I am trying to add a new row to a table using the following method:
There is a link on the page to "Add New Row". This calls the addRow javascript function.
I am trying to get this function to add a new row to the table where I have <DIV ID="testrow"></DIV> in my code.
However the error "document.testrow" is null or not an object is appearing. I have tried a number of things like using
document.testrow.document.writeln
document.report.testrow.writeln
but nothing works. I would appreciate any help.


<script language=javascript>
function addRow(table)
{
     document.testrow.writeln('<tr>');
     document.testrow.document.writeln('<TD class=Data align=left><textarea name=rpt_name rows=5 cols=20></textarea></TD>');
        document.testrow.document.writeln('<TD class=Data align=left><textarea name=rpt_freq rows=5 cols=20></textarea></TD>');
        document.testrow.document.writeln('<TD class=Data align=left><textarea name=rpt_desc rows=5 cols=20></textarea></TD>');
        document.testrow.document.writeln('</tr>');
}
</Script>

<form name="report" method="POST" action="reporting">
<TABLE border='0' cellspacing='1' cellpadding='2' width='650' bgcolor='405740' id="tableTest" name="tableCampos">
     <TR>
                 <TH class='DataHeader' align='left'>REPORT NAME</TH>
                 <TH class='DataHeader' align='left'>FREQUENCY</TH>
                 <TH class='DataHeader' align='left'>DESCRIPTION</TH>
        </TR>

        <%
     if (rptListSize > 0 )
     {
          RPT rpt;
          for(int i=0; i<rptListSize; i++)
          {
               rpt = (RPT)rptListArray.get(i);
          %>
          <TR>
                  <TD class='Data' align='left'><textarea name="rpt_name" rows="5" cols="20"><%=DisplayUtil.formatString(rpt.getReportName())%></textarea></TD>
                  <TD class='Data' align='left'><textarea name="rpt_freq" rows="5" cols="20"><%=DisplayUtil.formatString(rpt.getReportFreq())%></textarea></TD>
                  <TD class='Data' align='left'><textarea name="rpt_desc" rows="5" cols="20"><%=DisplayUtil.formatString(rpt.getReportDesc())%></textarea></TD>
             </TR>

              <%    
                   }
              }
          else
          {
          %>
          <TR>
                  <TD class='Data' align='left'><textarea name="rpt_name" rows="5" cols="20"></textarea></TD>
                  <TD class='Data' align='left'><textarea name="rpt_freq" rows="5" cols="20"></textarea></TD>
                  <TD class='Data' align='left'><textarea name="rpt_desc" rows="5" cols="20"></textarea></TD>
             </TR>
          <%          
          }
          %>
   
          <DIV ID="testrow"></DIV>        
</table>
<TABLE border='0' cellspacing='0' cellpadding='2' width='650' bgcolor='#ffffff'>
     <tr>
          <td align="right"><a href="#" onclick="addRow(tableTest);">Add New Row</a></td>
     </tr>
</table>
0
susanhb
Asked:
susanhb
  • 4
  • 2
2 Solutions
 
gator4lifeCommented:
susanhb -

The first problem that you have is that "testrow" is the *ID* of the <div>.  You cannot dynamically call an element with an ID like this: document.testrow.  The correct way to dynamically call this element using the Document Object Model is document.getElementById('testrow').

The second problem is that even if you had managed to retrieve the <div> element "testrow", a <div> does not have a document object.  There is only one document object per window, <frame>, or <iframe>.

The third problem is that once the document has been written to the client, you do not add new content into the document with the writeln() method.  You need to use DOM methods that reference objects and then use insertion methods or replacement methods to change the content.

So, having said all of this, you were way off the mark.  However, go ahead and give this a try for your addWow() function:

<script type="text/javascript">
<!--
     function addRow() {

          // retrieve a reference to the "testrow" <div>
          var oTestRow = document.getElementById('testrow');

          // create the string that holds the new row
          var sNewRow = '';
          sNewRow += '<tr>';
          sNewRow += '<td class="Data"><textarea name="rpt_name" rows="5" cols="20"></textarea></td>';
          sNewRow += '<td class="Data"><textarea name="rpt_freq" rows="5" cols="20"></textarea></td>';
          sNewRow += '<td class="Data"><textarea name="rpt_desc" rows="5" cols="20"></textarea></td>';
          sNewRow += '</tr>';

          // add the new row to the existing content within the "testrow" <div>
          oTestRow.innerHTML += oTestRow.innerHTML + sNewRow;
     }
//-->
</script>

Hope this helps.

gator4life
(chomp, chomp)
0
 
gator4lifeCommented:
Oops...forgot to change one other thing.

Make sure you change your function call to

     onclick="addRow()"

instead of

     onclick="addRow(tableTest);"

That's it!

gator4life
(chomp, chomp)
0
 
rajveluCommented:

document.testrow.document.writeln will not work.

document is a super class
you can use document.writeln to write a table to a new html file but this will not serve your purpose.

Instead try using a asp to create more rows.

<script language=javascript>
function addRow(table)
{
     //assuming this asp file is reporting.asp
     document.href = reporting.asp?newrow=1
}
</Script>

<form name="report" method="POST" action="reporting">
<TABLE border='0' cellspacing='1' cellpadding='2' width='650' bgcolor='405740' id="tableTest" name="tableCampos">
    <TR>
                <TH class='DataHeader' align='left'>REPORT NAME</TH>
                <TH class='DataHeader' align='left'>FREQUENCY</TH>
                <TH class='DataHeader' align='left'>DESCRIPTION</TH>
       </TR>

       <%
    if (rptListSize > 0 )
    {
         RPT rpt;
         for(int i=0; i<rptListSize; i++)
         {
              rpt = (RPT)rptListArray.get(i);
         %>
         <TR>
                 <TD class='Data' align='left'><textarea name="rpt_name" rows="5" cols="20"><%=DisplayUtil.formatString(rpt.getReportName())%></textarea></TD>
                 <TD class='Data' align='left'><textarea name="rpt_freq" rows="5" cols="20"><%=DisplayUtil.formatString(rpt.getReportFreq())%></textarea></TD>
                 <TD class='Data' align='left'><textarea name="rpt_desc" rows="5" cols="20"><%=DisplayUtil.formatString(rpt.getReportDesc())%></textarea></TD>
            </TR>

             <%    
                  }
             }
         else
         {
         %>
         <TR>
                 <TD class='Data' align='left'><textarea name="rpt_name" rows="5" cols="20"></textarea></TD>
                 <TD class='Data' align='left'><textarea name="rpt_freq" rows="5" cols="20"></textarea></TD>
                 <TD class='Data' align='left'><textarea name="rpt_desc" rows="5" cols="20"></textarea></TD>
            </TR>
         <%          
         }
         %>
   
              <%
           if request("newrow") = 1 then
           %>
           <TD class=Data align=left><textarea name=rpt_name rows=5 cols=20></textarea></TD>
           <TD class=Data align=left><textarea name=rpt_name rows=5 cols=20></textarea></TD>
           <TD class=Data align=left><textarea name=rpt_name rows=5 cols=20></textarea></TD>
           <%end if%>
           
</table>
<TABLE border='0' cellspacing='0' cellpadding='2' width='650' bgcolor='#ffffff'>
    <tr>
         <td align="right"><a href="#" onclick="addRow(tableTest);">Add New Row</a></td>
    </tr>
</table>
</form>

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
gator4lifeCommented:
rajvelu -

Your method will only add one new row. Remember, it will never add more than one new row, because the page will always get reloaded from *scratch*, creating the same row over and over each time, never adding any more than that one.  If the reason for this functionality was only adding one new row, why not just code the one row in from the beginning?  Seems like an awful lot of processing time (both on the server and client) and bandwidth to add just one row.  Using client-side DHTML is *much*, MUCH faster and does not just limit you to one row.  The Document Object Model is your friend; learn to utilize it when you can...

gator4life
(chomp, chomp)
0
 
rajveluCommented:
gator4life

Your right, DOM is the right choice.

0
 
gator4lifeCommented:
PashaMod -

I posted the correct solution to this question and would like to be considered for the points.

gator4life
(chomp, chomp)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now