How To Create a Collapsible Table Using Javascript

Javascript is a computer programming language that was developed to allow objects to be embedded into web browsers. Today, java and other related scripts and programming language are used to create a more interactive web browsing experience. Through Javascript, the web page is transformed into a system of objects such as widgets, links, web forms, and tool bars that will allows you to make web browsing an easier experience for your clients and subscribers. One of the basic java objects that you can create is the collapsible table. Here’s how.

What you need. To create a collapsible table using Javascript, you will need a web browser and an html editor. The most basic editor that you can use is the Notepad program that is embedded in all Windows systems. There are plenty of other editors that you can use, but for beginners the Notepad will suffice. The web browser – such as Mozilla Firefox, Google Chrome, or Safari – will be used to view and double check the finished product.

The HTML file. The HTML file is the actual file that your web browser will open. This file is also what you will upload into the Internet through a web server and will be used by other people to view your web page. To create your HTML file, open a blank notepad page and save the file as HTM, found on the ‘Save’ dialog box. Make sure that you do not use spaces and that your files are all in small caps. To activate the HTML file, you need to input:

<html>
</html>

Keep in mind that html is also a web programming language which has specific rules to follow. Between the two codes above, you will be able to place all of the text, objects, and tables that you want. You will place the Javascript function for creating a table in between these codes.

The Javascript function. Like HTML, there are pre-made functions and codes that you will need to use to get the desired object. If you are trying to create collapsible tables, the code to use is:

<form name='frmSearch' action='' method='post'>
   <table style='width:700px;border:1px solid #000000' cellpadding='3' cellspacing='3'>
      <tr><td width='100%'>
         <input type='text' name='searchterm' maxlength='128' style='width:99%' />
      </td>
      <td>
         <a href="#" onclick="return hidify_showify('search_options','search_arrow','Less','More');">
         <img src="images/arrow_down.gif" alt='Advanced Options' border='0' id='search_arrow' />
         </a>
      </td></tr>
      <tr><td width='100%' id='search_options'>
         <br />__Advanced stuff goes here__<br />
      </td></tr>
      <tr><td width='100%' align='center'>
      <input type='submit' name='submit' value='Search' />
      </td></tr>
   </table>
</form>

This code should be followed exactly, and will give you the basic collapsible table with three rows. These three boxes contain the following: the text box that web users will use to search for particular content in your site, the button for minimizing or maximizing the search rules, and the button that the users will press to submit the search for the site.

The code above will give you the structure and outline for the table. However, this table is not visible on most web browsers, since it only acts as the plan rules that are used to create the collapsible table. What you need to do next is to display the actual table and modify the table. This can be done by using the Javascript function below:

<script type="text/javascript">
function hidify_showify(e_table, e_img, alt_less, alt_more) {
   if(document.getElementById) {
      var id_table = document.getElementById(e_table).style;
      var id_img = document.getElementById(e_img);

      //Set the object to table-cell if the browser is
      //Firefox and block if it's anything else.
      if(navigator.userAgent.indexOf("Firefox") != -1){
         if(id_table.display == "table-cell") {
            id_table.display = "none";
            id_img.src = "images/arrow_down.gif";
            id_img.alt = alt_more;
         }
         else {
            id_table.display = "table-cell";
            id_img.src = "images/arrow_up.gif";
            id_img.alt = alt_less;
         }
      }
      else {
         if(id_table.display == "block") {
            id_table.display = "none";
            id_img.src = "images/arrow_down.gif";
            id_img.alt = alt_more;
         }
         else {
            id_table.display = "block";
            id_img.src = "images/arrow_up.gif";
            id_img.alt = alt_less;
         }
      }
      return false;
   }
   else {
      return true;
   }
}
</script>

This function will allow you to use CSS to edit and modify how the Javascript collapsible table will be shown. This includes the size, color, and other display properties for the collapsible table. to do this, you should go the appropriate code line pertaining to the particular part of the table that you want to edit.

Learning Javascript is not difficult. Just set your computer on a padded table or lightweight table and sit yourself on a comfy collapsible chair. With some time and effort, learning Javascript can be as easy as collapsible camping with collapsible furniture. Once you know how to use the codes above, you can move on to scripting entire web pages using java.

 

Share this article!

Follow us!

Find more helpful articles: