Using div tag to display table of content and html table
I want to create a table of contents(toc) on the top of my browser output and each of my content in toc in linked with a javascript function. I want that when i click over the content its linked function is called and output is displayed below toc.
Description : I want a table row at top of my browser output in which each cell of row has contents of table which are linked to a javacscript function. When i click over contents of table i want their output to be displayed at bottom of same window below table of content row.
Thanks for so much help....
Here below i am enclosing my code which is generating html table.
This is my html file in which i have sourced my javascript and json database file. In this i am calling function createtable fron javascript file.
[<!DOCTYPE html>
<html>
<head>
<title>Data check report</title>
<script src="Data.js"></script>
<script src="report_functions_sample.js"></script>
<script src="table.js"></script>
<script src="default.css"></script>
<link rel='stylesheet' type='text/css' href='table.css'>
<script type="text/javascript">
createtable();
</script>
</head>
</html>]
Below is my javascript file in which i have written javascript functions which are dynamically generating a table.
[//******************************************************************************************
// Function calling other functions to create HTML Table.
//******************************************************************************************
function createtable() {
//Calling function (html_table) to create table.
html_table(FRS_ccs);
//Calling table of content function(toc) to provide content.
toc();
}
//*****************************************************************************************
// Function to provide table of contents.
//*****************************************************************************************
function toc() {
document.write("<table border\"4\"><thead><tr><th><h2><a onclick=\"html_table(FRS_ccs)\">REPORT CCS</h2></th><th><h2>REPORT NLDM</h2></th></tr></table>")
}
//****************************************************************************************
// Function to create HTML Table from JSON database.
//****************************************************************************************
function html_table(data_array) {
document.write("<div class=\"align_left\"><table class=\"example sort05 table-autosort table-autofilter\" border=\"1\"><thead><tr><th class=\"table-sortable:alpha-numeric\">DB Filename<br/><input name=\"filter\" size=\"20\" onkeyup=\"Table.filter(this,this)\"></th><th class=\"table-sortable:alpha-numeric\">DTVG <input name=\"filter\" size=\"20\" onkeyup=\"Table.filter(this,this)\"></th><th class=\"table-sortable:alpha-numeric\">Operating Condition <input name=\"filter\" size=\"20\" onkeyup=\"Table.filter(this,this)\"></th><th class=\"table-sortable:numeric\">Level Shifters</th><th class=\"table-sortable:numeric\">Isolation Cells</th><th class=\"table-sortable:numeric\">Switch Cells</th><th class=\"table-sortable:numeric\">Always On Cells</th><th class=\"table-sortable:numeric\">Retention Registers</th></tr></thead><tbody id='table_body'></tbody></table></div>");
for (var x=0; x < data_array.length; x++) {
// Calling function till JSON array length.
table([data_array[x].db_filename,data_array[x].DTVG,data_array[x].operating_condition,data_array[x].level_shifter,data_array[x].isolation_cell,data_array[x].switch_cell,data_array[x].always_on,data_array[x].retention,data_array[x].file_name]);
}
//***************************************************************************************
// Function to create HTML Table dynamically.
//***************************************************************************************
function table(argument) {
var tr=document.createElement('tr');
for (var i=0; i < argument.length -1; i++) {
var td=document.createElement('td');
if (i == 0) {
td.appendChild(document.createTextNode(argument[i]));
}
if (i == 1) {
td.appendChild(document.createTextNode(argument[i]));
}
if (i == 2) {
td.appendChild(document.createTextNode(argument[i]));
}
//Content and hyperlink for level shifter cells.
if (i == 3) {
if (data_array[x].level_shifter == 0) {
td.appendChild(document.createTextNode(argument[i]));
} else {
var arg0 = ([argument[i+5]]);
var arg1 = "_level_shifter_cells.rpt"
//Calling function with arguments : arg0 and arg1.
cell_content(arg0,arg1);
}
}
//Content and hyperlink for isolated cells.
if (i == 4) {
if (data_array[x].isolation_cell == 0) {
td.appendChild(document.createTextNode(argument[i]));
} else {
var arg0 = ([argument[i+4]]);
var arg1 = "_isolation_cells.rpt"
cell_content(arg0,arg1);
}
}
//Content and hyperlink for switch cells.
if (i == 5) {
if (data_array[x].switch_cell == 0) {
td.appendChild(document.createTextNode(argument[i]));
} else {
var arg0 = ([argument[i+3]]);
var arg1 = "_switch_cells.rpt"
cell_content(arg0,arg1);
}
}
//Content and hyperlink for always on cells.
if (i == 6) {
if (data_array[x].always_on == 0) {
td.appendChild(document.createTextNode(argument[i]));
} else {
var arg0 = ([argument[i+2]]);
var arg1 = "_always_on_cells.rpt"
cell_content(arg0,arg1);
}
}
//Content and hyperlink for retention cells.
if (i == 7) {
if (data_array[x].retention == 0) {
td.appendChild(document.createTextNode(argument[i]));
} else {
var arg0 = ([argument[i+1]]);
var arg1 = "_retention_cells.rpt"
cell_content(arg0,arg1);
}
}
tr.appendChild(td);
}
//Appending data to table.
document.getElementById('table_body').appendChild(tr);
//*****************************************************************************
//Function to create hyperlink.
//*****************************************************************************
function cell_content(arg0,arg1) {
if (data_array == FRS_ccs) {
var file_name = "report_data_fe_pok_ccs_completeness" + "/" + arg0 + arg1
} else {
var file_name= "report_data_fe_pok_nldm_completeness" + "/" + arg0 + arg1
}
var link =document.createElement('link');
link.appendChild(document.createTextNode(argument[i]));
link.setAttribute('href' , file_name);
td.appendChild(link);
}
}
]
function html_table() is dynamically generating a html table. Iwant to create a table of content in browser window in which i want to create link that when i click over them they call function html_table() and table is generated below toc.
