?
Solved

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

Posted on 2003-03-13
9
Medium Priority
?
593 Views
Last Modified: 2008-03-04
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
Comment
Question by:susanhb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
9 Comments
 
LVL 5

Accepted Solution

by:
gator4life earned 252 total points
ID: 8132394
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
 
LVL 5

Expert Comment

by:gator4life
ID: 8132409
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
 

Assisted Solution

by:rajvelu
rajvelu earned 248 total points
ID: 8132437

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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
LVL 5

Expert Comment

by:gator4life
ID: 8133637
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
 

Expert Comment

by:rajvelu
ID: 8137336
gator4life

Your right, DOM is the right choice.

0
 
LVL 5

Expert Comment

by:gator4life
ID: 10625128
PashaMod -

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

gator4life
(chomp, chomp)
0

Featured Post

Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question