PDA

View Full Version : Generating a basic dynamic HTML table based users selected criteria



jason_kelly
12-05-2013, 08:04 PM
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



<!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>