locked
I need a little help with a simple (I think) javascript. Will give credit in my blog for answer I use RRS feed

  • Question

  • User300685930 posted

    I'm doing a blog post on WCF to JSON and I'm almost done except for the final part.  I have a very simple web page that I want to (using javascript) build a table. 

    So, Here is what I have:

    On my aspx page I have a div as follows:

    <div id='mytablehere' >

    </div>

    I have a javascript that is included on that page that I want to build a table of data from.  I'll show you what I have and I think it will be obvious what I want.  If not, feel free to post.

    for (var i = 0; i < dataList.length; i++) {

    document.writeln(dataList[i].city);

    document.write(
    " ");

    document.writeln(dataList[i].state);

    document.writeln(
    "\n");

    }

    Thanks! 

     

     

    Saturday, September 13, 2008 9:57 PM

Answers

  • User828661971 posted

    if you don't actually need that table to be written down into your page, you can use this example:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
    <script type="text/javascript">
    
    function WriteTable(divObj)
    {
        var city = 'The City';
        var state = 'The State';
    
        var tableStart = '<table cellspacing="0" cellpadding="0"><tbody>';
        var tableContent = '';
        var tableEnd = '</tbody></table>';
    
        for (var i = 0; i < 5; i++) {
            tableContent += '<tr><td>City: '+city+'</td><td>State: '+state+'</td></tr>';
        }
        return divObj.innerHTML = tableStart + tableContent + tableEnd;
    }
    
    </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="mytablehere">
            <script type="text/javascript">
                WriteTable(document.getElementById('mytablehere'));
            </script>
        </div>
        </form>
    </body>
    </html>
    
      
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 14, 2008 12:47 AM
  • User828661971 posted

    An other example:

     

        <div id="mytablehere">
            <script type="text/javascript">
                document.writeln('<table cellspacing="0" cellpadding="0"><tbody>');
                var content = '';
                for (var i = 0; i < 5; i++) {
                    content += '<tr><td>City: '+city+'</td><td>State: '+state+'</td></tr>';
                }
                document.writeln(content);
                document.writeln('</tbody></table>');
            </script>
        </div>
    
      
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 14, 2008 12:52 AM
  • User798903548 posted

    Check this out:

    <form id="Form1" method="post" runat="server">
     <div id="tableDiv"></div>
     <input type="button" value="Populate Table" onclick="JavaScript: createTable('tableDiv', 10, 3);">
    </form>

    <script type="text/javascript">
    <!--
    function createTable(parentElementId, numberOfRows, numberOfColumns)
    {
     var tableRef = document.createElement('TABLE');
     tableRef.id = 'table_' + new Date().getTime();

     // Add the rows...
     for (var i=0; i<numberOfRows; i++)
     {
      var tableRow = tableRef.insertRow();

      // Add the columns...
      for (var j=0; j<numberOfColumns; j++)
      {
       var tableCell = tableRow.insertCell();

       var cellData = 'Row #' + i + ' Col #' + j;

       if ( tableCell.textContent )
        tableCell.textContent = cellData;
       else if ( tableCell.innerText )
        tableCell.innerText = cellData;
       else
        tableCell.innerHTML = cellData;
      }
     }

     if ( (!parentElementId) || (parentElementId.length <= 0) )
     {
      document.body.appendChild(tableRef);
     }
     else
     {
      document.getElementById(parentElementId).appendChild(tableRef);
     }

     return tableRef;
    };
    // -->
    </script>

    NC...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 14, 2008 7:52 AM

All replies

  • User828661971 posted

    if you don't actually need that table to be written down into your page, you can use this example:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
    <script type="text/javascript">
    
    function WriteTable(divObj)
    {
        var city = 'The City';
        var state = 'The State';
    
        var tableStart = '<table cellspacing="0" cellpadding="0"><tbody>';
        var tableContent = '';
        var tableEnd = '</tbody></table>';
    
        for (var i = 0; i < 5; i++) {
            tableContent += '<tr><td>City: '+city+'</td><td>State: '+state+'</td></tr>';
        }
        return divObj.innerHTML = tableStart + tableContent + tableEnd;
    }
    
    </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="mytablehere">
            <script type="text/javascript">
                WriteTable(document.getElementById('mytablehere'));
            </script>
        </div>
        </form>
    </body>
    </html>
    
      
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 14, 2008 12:47 AM
  • User828661971 posted

    An other example:

     

        <div id="mytablehere">
            <script type="text/javascript">
                document.writeln('<table cellspacing="0" cellpadding="0"><tbody>');
                var content = '';
                for (var i = 0; i < 5; i++) {
                    content += '<tr><td>City: '+city+'</td><td>State: '+state+'</td></tr>';
                }
                document.writeln(content);
                document.writeln('</tbody></table>');
            </script>
        </div>
    
      
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 14, 2008 12:52 AM
  • User300685930 posted

    Thanks!!!  I posted the blog with the code very similar to what you have above.

    Here is the article:  http://peterkellner.net/2008/09/14/wcf-web-service-json-vs2008/

    Sunday, September 14, 2008 1:42 AM
  • User828661971 posted

     ooohh.. Thank you! :)

    Sunday, September 14, 2008 2:01 AM
  • User798903548 posted

    Check this out:

    <form id="Form1" method="post" runat="server">
     <div id="tableDiv"></div>
     <input type="button" value="Populate Table" onclick="JavaScript: createTable('tableDiv', 10, 3);">
    </form>

    <script type="text/javascript">
    <!--
    function createTable(parentElementId, numberOfRows, numberOfColumns)
    {
     var tableRef = document.createElement('TABLE');
     tableRef.id = 'table_' + new Date().getTime();

     // Add the rows...
     for (var i=0; i<numberOfRows; i++)
     {
      var tableRow = tableRef.insertRow();

      // Add the columns...
      for (var j=0; j<numberOfColumns; j++)
      {
       var tableCell = tableRow.insertCell();

       var cellData = 'Row #' + i + ' Col #' + j;

       if ( tableCell.textContent )
        tableCell.textContent = cellData;
       else if ( tableCell.innerText )
        tableCell.innerText = cellData;
       else
        tableCell.innerHTML = cellData;
      }
     }

     if ( (!parentElementId) || (parentElementId.length <= 0) )
     {
      document.body.appendChild(tableRef);
     }
     else
     {
      document.getElementById(parentElementId).appendChild(tableRef);
     }

     return tableRef;
    };
    // -->
    </script>

    NC...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 14, 2008 7:52 AM
  • User300685930 posted

    Nice! any good suggestions on how to become a javascript wizard?  I'm needing to learn javascript much better.

    Sunday, September 14, 2008 9:49 AM
  • User798903548 posted

    Look for the WROX book Professional JavaScript for Web Developers by Nicholas C. Zakas or any of Danny Goodman's JavaScript Bibles.

    It is much easier today because of Google. You can find a sample of just about anything that you want to do with a good Google search.

    Good luck with that!

    NC...

     

    Sunday, September 14, 2008 9:58 AM