Results 1 to 1 of 1

Thread: Generating a basic dynamic HTML table based users selected criteria

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Generating a basic dynamic HTML table based users selected criteria

    Hello,

    I need your help,

    How can functionality be added to my existing code such that prior to creating the table, functionality to be able to select which columns and rows would displayed? It is noted that COLUMN A and ROW 7 are static.

    Much thanks and appreciation for all your help and support.

    Cheers,

    Jay

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    
    <meta http-equiv="Content-Language" content="en-ca">
    
    
    <style type="text/css">
    body {
    	font-family: Arial;
    	font-size: 9pt;
    	margin: 10px;
    }
    #oTable {
    	border: 0;
    	width: 100%;
    	border-collapse: collapse;
    	table-layout: fixed;
    }
    </style>
    
    </head>
    
    <body>
    
    <table id="oTable"> 
    <TBODY ID="oTBody0"></TBODY>
    </TABLE>
    
    
    <table border="0" cellpadding="0" cellspacing="0" id="table1">
    	<tr>
    		<td>Display Columns</td>
    		<td style="width: 10px;"></td>
    		<td>Display Rows</td>
    	</tr>
    	<tr>
    		<td>B<input id="colB" type="checkbox"></td>
    		<td>&nbsp;</td>
    		<td>1<input id="row1" type="checkbox"></td>
    	</tr>
    	<tr>
    		<td>C<input id="colC" type="checkbox"></td>
    		<td>&nbsp;</td>
    		<td>2<input id="row2" type="checkbox"></td>
    	</tr>
    	<tr>
    		<td>D<input id="colD" type="checkbox"></td>
    		<td>&nbsp;</td>
    		<td>3<input id="row3" type="checkbox"></td>
    	</tr>
    	<tr>
    		<td>E<input id="colE" type="checkbox"></td>
    		<td>&nbsp;</td>
    		<td>4<input id="row4" type="checkbox"></td>
    	</tr>
    	<tr>
    		<td>F<input id="colF" type="checkbox"></td>
    		<td>&nbsp;</td>
    		<td>5<input id="row5" type="checkbox"></td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td>&nbsp;</td>
    		<td>6<input id="row6" type="checkbox"></td>
    	</tr>
    </table>
    
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function create_table() {
      // Declare variables and create the header, footer, and caption.
      var oTHead = oTable.createTHead();
      var oTFoot = oTable.createTFoot();
      var oCaption = oTable.createCaption();
      var oRow, oCell;
      var i, j;
    
      // Declare stock data that would normally be read in from a stock Web site.
      var heading = new Array();
      heading[0] = "COLA";
      heading[1] = "COLB";
      heading[2] = "COLD";
      heading[3] = "COLE";
      heading[4] = "COLF";
      heading[5] = "TOTAL";
    
      var stock = new Array();
    
      stock[0] = new Array("ROW1","1","2","3","4","10");
      stock[1] = new Array("ROW2","5","6","7","8","26");
      stock[2] = new Array("ROW3","9","10","11","12","42");
      stock[3] = new Array("ROW4","13","14","15","16","58");
      stock[4] = new Array("ROW5","17","18","19","20","74");
      stock[5] = new Array("ROW6","21","22","23","24","90");
      
      var footer = new Array();
      footer[0] = "Total"
      footer[1] = "sumB"
      footer[2] = "sumC"
      footer[3] = "sumD"
      footer[4] = "sumE"
      footer[5] = "sumF"
      
      // Insert a row into the header.
      oRow = oTHead.insertRow(-1);
      // Insert cells into the header row.
      for (i=0; i<heading.length; i++) {
        oCell = oRow.insertCell(-1)
        oCell.innerHTML = heading[i]
      }
    
      // Insert rows and cells into bodies.
      for (i=0; i<stock.length; i++)
      {
        var oBody = oTBody0
        oRow = oBody.insertRow(-1);
        for (j=0; j<stock[i].length; j++)
        {
          oCell = oRow.insertCell(-1);
          oCell.innerHTML = stock[i][j];
        }
      }
    
      // Insert a row into the footer.
      oRow = oTFoot.insertRow(-1);
      // Insert cells into the header row.
      for (i=0; i<footer.length; i++) {
        oCell = oRow.insertCell(-1)
        oCell.innerHTML = footer[i]
      }
    
    
    }
    </script>
    
    <input type="button" value="Create Table" onclick="create_table()"> 
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	uFyIC.png 
Views:	304 
Size:	6.9 KB 
ID:	5290  
    Last edited by jason_kelly; 12-06-2013 at 05:47 PM.

Similar Threads

  1. Center fixed Table criteria
    By stew in forum CSS
    Replies: 4
    Last Post: 06-28-2012, 10:24 AM
  2. Static HTML based CMS vs Dynamic CMS
    By dima777 in forum HTML
    Replies: 6
    Last Post: 01-14-2012, 12:38 AM
  3. Replies: 0
    Last Post: 01-14-2009, 02:05 AM
  4. Dynamic size popup window based on a table?
    By theDogger in forum JavaScript
    Replies: 1
    Last Post: 02-08-2008, 04:36 PM
  5. Basic Gameplan for a CSS based site
    By LaserGecko in forum CSS
    Replies: 3
    Last Post: 12-29-2007, 06:13 AM

Bookmarks

Posting Permissions

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