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.
I had been working on a script a long time ago---not completely debugged---that scans an HTML document for all header elements (h1 through h6) and also for HTML comment insertions that mark special places where you want a jump to your table of contents.
Once all the header elements and special page marks are obtained, then the table was to be built in one of two ways:
1. Child window and the ToC is made as HTML into it
2. The main window is used, but a DIV is forcibly inserted in a left panel or as a float at the top of the main text.
The main script document is called htmlTOCgenerator.js, which means HTML Table of Contents Generator.
The document includes the htmlTOCgenerator.js, which is supposed to be "libary code". Another script file 'proteomicsDocs.js' is supposed to make the the calls to the library code.
On the page at the top are two buttons. The button the left is supposed to generate the Table of Contents in a child window. This is then supposed to have clickable links that jumps to the point you want in the long document. It does. However, when the window is opened and the contents generated, there is a Javascript error: it is related to the child window not being ready while the Javascript on the parent is still executing its thread asynchronously, and it comes upon a statement in which a Div element has not been defined yet because the child window has not finished its execution. To debug that, you need to make the child window opening and rendering synchronous, and then give a return that lets the script continue.
If you click the button "Show index embedded in the document", it tries to put the ToC at the left as a div. It is a bloody mess, and needs heavy code fixing. I haven't fully figured out how to dress up the div nicely, and to use the correct CSS to position fixed, relative, absolute.
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) {
// 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.
You could put your TOC into the 1st tab with other document divisions in different tab areas.
Note:
When you don't submit some code you would like to modify or a site you would like to emulate,
you tend to get these off-the-wall suggestions.
Thanks firstly for so much help. But i want to know how can i keep my toc and html table generated by the links from toc at top together in same window. Where should i apply div to my functions. A have placed my code below in reply u can have a look to have an better idea whats exactly i want.
Thanks firstly for so much help. But i want to know how can i keep my toc and html table generated by the links from toc at top together in same window. Where should i apply div to my functions. A have placed my code below in reply u can have a look to have an better idea whats exactly i want.
Your terminology is a bit confusing to me.
Do you have a live example of what it is that you are trying to do? Have you a link to the code in the earlier post to see the layout and contents of what it is that you are trying to accomplish?
Reply With Quote
Originally Posted by JMRKER
Bookmarks