SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding a "sort table" button IF javascript is enabled

    Hi

    I'm currently struggling with an assignment in my web studies and would appreciate any insite. This is the assignment:

    - Create a sort function, written in an external js-file, to a html table IF javascript is enabled.

    There are 3 files to be used in this assignment:

    - A html-file with a small table with 4 columns

    - A js-file consisting of a this code:

    function addLoadEvent(func)
    {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = func;
    }
    else
    {
    window.onload = function()
    {
    oldonload();
    func();
    }
    }
    }


    - And finally a js-file that should consist of a sortTable function that adds a button for sorting the tabledata by the fourth column in the html table IF javascript is enabled.

    This is as far as I've come with the sort-script:

    window.onload = function ()

    function = sortTable()
    }

    {

    var table = document.getElementById("datatable");
    var rows = table.getElementsByTagName("tr");
    var cells = Array();

    for (var i = 1; i < rows.length; i++)
    {
    var cell = rows[i].getElementsByTagName("td")[3].firstChild.nodeValue;
    cells[i] = cell;
    }
    return cells;
    {


    I don't have a clue as to where or how I need to incorporate the sort button. Another frustrating thing is that I'm restricted to not change or add anything to either the html-file or the addloadevent.js-file.

    Please, I beg you all! I'm a newbie that really could need some help here!!

  2. #2
    SitePoint Zealot Ken Sharpe's Avatar
    Join Date
    Apr 2008
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You get "if javascript is enabled" for free because if it's not, your code simply won't run. If it runs, obviously it's enabled.

    To add the button look into the appendChild function.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want to sort the rows of the table using data stored in cells from a particular column. So, you'll need references to the rows and some way of linking each row to the value in its sort column.

    JavaScript allows you to add properties to objects at any time; you can add the text you want to sort by to the row element it comes from.

    I presume you don't want a full solution, but this should be handy:
    Code:
    // Pass in a reference to a table element and the column you want
    // data from.
    function getRowsWithData(tableElementRef, colNumber) {
    
      // Get the rows in the table
      var rows = tableElementRef.getElementsByTagName("tr");
    
      // Create an array to hold the rows.
      // This will be passed out of the function and used to sort the rows.
      var rowArray = [];
    
      // Iterate over the rows, getting data from the specified column	
      for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName("td");
    
        // Check there is a cell in the specified column
        if (cells[colNumber]) {
         
          // Add a new property to the row.
          // The property holds the value of the sort column.
          rows[i].data = cells[colNumber].innerHTML;
    
        }
        else {
    
          // If there is no cell in the specified column still add a data property.
          // Make it an empty string.
          rows[i].data = "";
        }
    
        // Add the row to the array
        rowArray.push(rows[i]);
      }
    	
      return rowArray;
    }


Bookmarks

Posting Permissions

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