Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple Function Help

    I am new to javascript and need help with a simple (to those that know what they are doing) function. I just need a function that takes the width and height and outputs a table with the width and height in relation to the table. An example would be something like:

    function numbersignTable(5,5);

    and the results would display:

    #####
    #####
    #####
    #####
    #####

    Can anyone help me with this?

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    by width and height do you mean columns and rows? if so, try this:


    Code:
    <html>
    
    
    <head>
    <title>dynamic tablemaker</title>
    
    <script type=text/javascript>
    
    function numbersignTable(Tcols,Trows){
    var j='0';
    var whattooutput='<table border=1 cellspacing=1>';
    while(j<Tcols){
      whattooutput+="<tr>";
       for(i='0';i<Trows;i++){
       whattooutput+="<td width=10 height=10>#</td>";
       }
      whattooutput+="</tr>";
    j++;
    }
    whattooutput+="</table>";
    document.getElementById('span1').innerHTML=whattooutput;
    }
    
    </script>
    
    </head>
    
    
    <body>
    
    
    <span id=span1></span>
    <input type=button onclick="numbersignTable('5','5');" value='clcik to create 5x5 table'>
    </body>
    
    
    </html>
    Last edited by brandonH; 02-27-2007 at 03:23 AM.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's close.... instead of it outputing 0,0 and 0,1 and so on - I would like it to actually output the number sign, not an actual number.

    Thanks for your help!

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    k, changed the code above to do what you want.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Inserting a table into a span element? O.o That code contains several HTML errors. Here’s an example with correct HTML that does a little bit more:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-US">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
    
        <title>CF 108450</title>
    
        <style type="text/css">
          * { margin: 0; }
          html { padding: 1em; text-align: right; }
          fieldset { width: 250px; }
          label { display: block; margin: 0.2em 0; }
          span.warning { display: block; color: red; text-align: center; font-weight: bold; }
          table { margin: 1em 0 0; border: 1px solid; }
        </style>
    
        <script type="text/javascript">
          function generateTable() {
            var fieldset = document.getElementsByTagName("fieldset")[0];
            var tableColumns = document.getElementById("tableColumns").value;
            var tableRows = document.getElementById("tableRows").value;
            if (!tableColumns || !tableRows || isNaN(tableColumns) || isNaN(tableRows) || (/^0$|-|\./).test(tableColumns) || (/^0$|-|\./).test(tableRows)) {
              var warning = document.createElement("span");
              warning.className = "warning";
              warning.appendChild(document.createTextNode("Use positive integers only!"));
              fieldset.appendChild(warning);
              }
            else {
              for (var i = 0; i < fieldset.childNodes.length; i++) {
                if (fieldset.childNodes[i].className && fieldset.childNodes[i].className == "warning") {
                  fieldset.removeChild(fieldset.childNodes[i]);
                  i--;
                  }
                }
              var table = document.createElement("table");
              var tableRowBody = document.createElement("tbody");
              for (var i = 0; i < tableRows; i++) {
                var row = document.createElement("tr");
                for (var j = 0; j < tableColumns; j++) {
                  var cell = document.createElement("td");
                  cell.appendChild(document.createTextNode("#"));
                  row.appendChild(cell);
                  }
                tableRowBody.appendChild(row);
                }
              table.appendChild(tableRowBody);
              document.body.appendChild(table);
              }
            }
        </script>
    
      </head>
      <body>
    
        <fieldset>
          <legend>Table Generator</legend>
          <label>Columns: <input id="tableColumns" type="text"></label>
          <label>Rows: <input id="tableRows" type="text"></label>
          <input type="button" id="generator" value="Generate Table" onclick="generateTable();">
        </fieldset>
    
      </body>
    </html>
    Last edited by Arbitrator; 02-27-2007 at 06:40 AM. Reason: Made a slight modification to the regular expressions.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •