www.webdeveloper.com
Results 1 to 7 of 7

Thread: Using div tag to display table of content and html table

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Posts
    4

    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.

  2. #2
    Join Date
    Jul 2010
    Posts
    66
    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.

    You can see it in action with this document.

    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.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb

    Alternative suggestion...

    Consider a tab menu.
    Like: http://www.barelyfitz.com/projects/tabber/
    or: http://phrogz.net/JS/Tabtastic/index.htm#overview

    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.

  4. #4
    Join Date
    Nov 2010
    Posts
    978
    or...

    just put the content in hidden divs and have the click on the link hide the previously shown one (if there is one shown) and show the new one.

    seems to be a lot simpler than the solutions offered, but as jmrker says we can only really guess at what you are trying to do

  5. #5
    Join Date
    Aug 2012
    Posts
    4

    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.

  6. #6
    Join Date
    Aug 2012
    Posts
    4
    Quote Originally Posted by JMRKER View Post
    Alternative suggestion...

    Consider a tab menu.
    Like: http://www.barelyfitz.com/projects/tabber/
    or: http://phrogz.net/JS/Tabtastic/index.htm#overview

    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.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Question

    Quote Originally Posted by sam1989 View Post
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles