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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts

    Generating a basic dynamic HTML table based users selected criteria

    Hello,

    I really need your help.

    I'd like to create a reporting interface that would generate a dynamic html table based on a users selected criteria.

    The below example uses the selected criteria high and low (representing rows) and selected groups are A and B (representing columns)



    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <br>
    
    <table border="0" cellpadding="0" cellspacing="0" id="table1">
        <tr>
            <td colspan="2"><b>Select Reporting Criteria</b></td>
            <td style="width: 20px;"></td>
            <td><b>Select Group</b></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>High</td>
            <td><input id="chk_high" type="checkbox" name="C1" value="ON"></td>
            <td>&nbsp;</td>
            <td>Group A</td>
            <td><input id="chk_groupa" type="checkbox"></td>
        </tr>
        <tr>
            <td>Low</td>
            <td><input id="chk_low" type="checkbox" name="C2" value="ON"></td>
            <td>&nbsp;</td>
            <td>Group B</td>
            <td><input id="chk_groupb" type="checkbox"></td>
        </tr>
        <tr>
            <td>Variance</td>
            <td><input id="chk_var" type="checkbox" name="C3" value="ON"></td>
            <td>&nbsp;</td>
            <td>Group C</td>
            <td><input id="chk_groupc" type="checkbox"></td>
        </tr>
        <tr>
            <td>Estimated</td>
            <td><input id="chk_est" type="checkbox" name="C4" value="ON"></td>
            <td>&nbsp;</td>
            <td>Group D</td>
            <td><input id="chk_groupdd" type="checkbox"></td>
        </tr>
        <tr>
            <td>Actuals</td>
            <td><input id="chk_act" type="checkbox" name="C5" value="ON"></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <br><br>
    <table border="1" cellspacing="1" id="table2">
        <tr>
            <td><b>Criteria</b></td>
            <td><b>Group A</b></td>
            <td><b>Group B</b></td>
    
    
            <td><b>Total</b></td>
    
    
        </tr>
        <tr>
            <td>High</td>
            <td>100</td>
            <td>80</td>
    
            <td>180</td>
    
        </tr>
        <tr>
            <td>Low</td>
            <td>20</td>
            <td>50</td>
    
            <td>70</td>
    
        </tr>
        </table>
    
    </body>
    
    </html>

  • #2
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Hi,

    is there a rhyme/reason for the attribute values?

    input id="chk_var" type="checkbox" name="C3" value="ON"
    id="chk_groupc" type="checkbox">

    or could they just as easily be

    input name="chk_var" type="checkbox" id="C3" value="Variance"
    name="chk_groupc" type="checkbox" id="C9" value="Group C"
    Where the world once stood
    the blades of grass
    cut me still

  • Users who have thanked Vincent Puglia for this post:

    jason_kelly (12-06-2013)

  • #3
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    So, is this what you're looking for?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function doIt() {
    	var el = "";
    	var rArray = new Array();
    	var cArray = new Array("Criteria");
    	for (var i = 1 ; i < 10 ; i++)
    	{
    		el = document.getElementById("C" + i);
    		if (el.checked) {
    			if (i < 6)   rArray[rArray.length] = el; 
    			else		 cArray[cArray.length] = el;
    		}
    	}
    	cArray[cArray.length] = "Total";
      	if ( rArray.length < 1 ||	cArray.length < 3) alert("you must select at least 1 col & row");
    	
    	var theTable = document.getElementById("table2");
    	var row = theTable.insertRow(0); 	//theTable.rows.length);
    	for (i = 0; i < cArray.length; i++) {
    		cell = row.insertCell(i);
    		cell.innerHTML = (cArray[i].type == 'checkbox') ? cArray[i].value : cArray[i];
    	}
    	   
        for (i = 0; i < rArray.length; i++) {
    		row = theTable.insertRow(theTable.rows.length);
    		for (j = 0; j < cArray.length; j++) {
    			cell = row.insertCell(j);
    			if (j == 0)  cell.innerHTML = rArray[i].value;
    		}
        }
    }
    </script>
    </head>
    <body>
    <br>
    <table border="0" cellpadding="0" cellspacing="0" id="table1">
        <tr>
            <td colspan="2"><b>Select Reporting Criteria</b></td>
            <td style="width: 20px;"></td>
            <td><b>Select Group</b></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>High</td>
            <td><input name="chk_high" type="checkbox" id="C1" value="HIGH"></td>
            <td>&nbsp;</td>
            <td>Group A</td>
            <td><input name="chk_groupa" type="checkbox" id="C6" value="Group A"></td>
        </tr>
        <tr>
            <td>Low</td>
            <td><input name="chk_low" type="checkbox" id="C2" value="LOW"></td>
            <td>&nbsp;</td>
            <td>Group B</td>
            <td><input name="chk_groupb" type="checkbox" id="C7" value="Group B"></td>
        </tr>
        <tr>
            <td>Variance</td>
            <td><input name="chk_var" type="checkbox" id="C3" value="Variance"></td>
            <td>&nbsp;</td>
            <td>Group C</td>
            <td><input name="chk_groupc" type="checkbox" id="C8" value="Group C"></td>
        </tr>
        <tr>
            <td>Estimated</td>
            <td><input name="chk_est" type="checkbox" id="C4" value="Estimated"></td>
            <td>&nbsp;</td>
            <td>Group D</td>
            <td><input name="chk_groupdd" type="checkbox" id="C9" value="Group D"></td>
        </tr>
        <tr>
            <td>Actuals</td>
            <td><input name="chk_act" type="checkbox" id="C5" value="Actuals"></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><input type='button' value='Go For It' onclick="doIt()">&nbsp;</td>
        </tr>
    
    </table>
    <br><br>
    <table border="1" cellspacing="1" id="table2">
    </table>
    </body>
    </html>
    Where the world once stood
    the blades of grass
    cut me still

  • Users who have thanked Vincent Puglia for this post:

    jason_kelly (12-06-2013)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts
    That's it Vincent!

    Thanks so much.

    Thanks to you I still have hair left on my head =).

  • #5
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    You're welcome...
    Where the world once stood
    the blades of grass
    cut me still

  • Users who have thanked Vincent Puglia for this post:

    jason_kelly (12-06-2013)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts
    Hi Vincent,

    I have one more question for you.

    I was having a hard time trying to integrate the data into the TD fields, so I am going to try going about this from another angle, how would I apply your complex example into the existing code below, I apologize for the repetitiveness, but this is beyond my level of javascript.

    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] = "COLC";
      heading[3] = "COLD";
      heading[4] = "COLE";
      heading[5] = "COLF";
      heading[6] = "TOTAL";
    
      var stock = new Array();
    
      stock[0] = new Array("ROW1","1","2","3","4","5","15");
      stock[1] = new Array("ROW2","5","6","7","8","9","35");
      stock[2] = new Array("ROW3","9","10","11","12","13","55");
      stock[3] = new Array("ROW4","13","14","15","16","17","75");
      stock[4] = new Array("ROW5","17","18","19","20","21", "95");
      stock[5] = new Array("ROW6","21","22","23","24","25","210");
      
      var footer = new Array();
      footer[0] = "Total"
      footer[1] = "sumB"
      footer[2] = "sumC"
      footer[3] = "sumD"
      footer[4] = "sumE"
      footer[5] = "sumF"
      footer[6] = "sumG"
      
      // 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>
    Last edited by jason_kelly; 12-06-2013 at 06:03 PM.

  • #7
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Hi Jason,

    Am I to understand that "Criteria, High, Low," etc are gone and to be replaced by Row1, etc.?

    Anywho....you need to create an array that will hold the data.

    var theStock = stock[rArray[I].id.substr(1)] should give you the array you need.

    the cell data would be the item within that array that the cArray points to:

    var cellData = theStock[cArray[j].id.substr(1)]

    After a quick glance for everything to work, you'll have to either rename the ids so they start with 0 (because of stock[0]) or subtract 1 in the for loops.

    Off to fun & games with the wife
    Where the world once stood
    the blades of grass
    cut me still

  • Users who have thanked Vincent Puglia for this post:

    jason_kelly (12-07-2013)

  • #8
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    guess the problem was resolved?
    Where the world once stood
    the blades of grass
    cut me still


  •  

    Posting Permissions

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