Dynamic Table works in IE but not Firefox

2 New Member

I wrote this pretty slick DHTML table that lets you add/remove rows and show/hide columns on the fly. It works perfectly in IE7, but it doesn't behave in Firefox 2.0.0.4. You can see it in action here:

http://www.phreelancer.com/dyn_table/

If you start to add/remove rows and then show/hide columns a few times in FF, you'll see that some table cells are bundled together or that some hidden cells don't get collapsed (but are still empty). It's driving me insane. I've tried several approaches. Any advice would be great. Here's the code:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>

<title>Todomo Admin Section</title>

<link rel="stylesheet" type="text/css" href="http://www.phreelancer.com/dyn_table/dyn_table.css"/>

<script type="text/javascript">

// these array values correspond to the current status of their checkboxes

var languages = new Array();

languages["English"] = true;

languages["Spanish"] = true;

languages["Portuguese"] = false;
 
document.getElementsByClassName = function(class_name) {

   var docList = this.all || this.getElementsByTagName("*");

   var matchArray = new Array();
 
   // create a regular expression object for class

   var re1 = new RegExp("\\b"+class_name+"\\b");
 
   // create regular expression to handle dashes in class name

   var re2 = new RegExp("[\S]"+class_name+"|"+class_name+"[\S]");
 
   for (var i = 0; i < docList.length; i++) {

      if (re1.test(docList[i].className) && !re2.test(docList[i].className) ) {

         matchArray[matchArray.length] = docList[i];

      }

   }

   return matchArray;

}
 
// add/remove table column for specified language

function dyn_table_change_language(language) {

   var cb = document.getElementById("cb"+language);
 
   languages[language] = cb.checked;
 
   // make sure at least one checkbox is checked

   if (!cb.checked) {

      var num_checked = 0;

      for (var key in languages) {

         if (languages[key]) {

            num_checked++;

         }

      }
 
      if (num_checked == 0) {

         languages[language] = true;

         cb.checked = true;

         alert("You must keep at least one language enabled.");

         return;

      }

   }
 
   var cells = document.getElementsByClassName(language);

   for (var i=0; i<cells.length; i++) {

      cells[i].style.display = cb.checked ? "block" : "none";

   }

}
 
// hide all table cells that are part of a disabled language/column

function dyn_table_hide_languages() {

   for (var language in languages) {

      if (!languages[language]) {

         var cells = document.getElementsByClassName(language);

         for (var i=0; i<cells.length; i++) {

            cells[i].style.display = "none";

         }

      }

   }

}
 
// add a new table row

function dyn_table_add_category() {

   var tbody = document.getElementById("dyn_table_categories");
 
   // count up all the existing categories on the screen

   var category_id = 1;

   while (true) {

      category_id++;

      var row = document.getElementById("category"+category_id);

      if (!row) {

         break;

      }

   }
 
   var tr = document.createElement("tr");

   tr.setAttribute("id", "category"+category_id);
 
   var td_label = document.createElement("td");

   td_label.appendChild(document.createTextNode("Category "+category_id+" Name:"));

   td_label.setAttribute("class", "left");

   td_label.setAttribute("className", "left");
 
   var td_English = document.createElement("td");

   td_English.setAttribute("class", "English");

   td_English.setAttribute("className", "English");
 
   var td_Spanish = document.createElement("td");

   td_Spanish.setAttribute("class", "Spanish");

   td_Spanish.setAttribute("className", "Spanish");
 
   var td_Portuguese = document.createElement("td");

   td_Portuguese.setAttribute("class", "Portuguese");

   td_Portuguese.setAttribute("className", "Portuguese");
 
   var td_del_link = document.createElement("td");

   var a_del_link = document.createElement("a");

   a_del_link.setAttribute("id", "del_category"+category_id);

   a_del_link.setAttribute("href", "javascript:dyn_table_del_category("+category_id+")");

   a_del_link.appendChild(document.createTextNode("Delete Category "+category_id));

   td_del_link.appendChild(a_del_link);
 
   var input_English = document.createElement("input");

   input_English.setAttribute("type", "text");

   input_English.setAttribute("name", "English"+category_id);

   input_English.setAttribute("id", "English"+category_id);
 
   var input_Spanish = document.createElement("input");

   input_Spanish.setAttribute("type", "text");

   input_Spanish.setAttribute("name", "Spanish"+category_id);

   input_Spanish.setAttribute("id", "Spanish"+category_id);
 
   var input_Portuguese = document.createElement("input");

   input_Portuguese.setAttribute("type", "text");

   input_Portuguese.setAttribute("name", "Portuguese"+category_id);

   input_Portuguese.setAttribute("id", "Portuguese"+category_id);
 
   td_English.appendChild(input_English);

   td_Spanish.appendChild(input_Spanish);

   td_Portuguese.appendChild(input_Portuguese);
 
   tr.appendChild(td_label);

   tr.appendChild(td_English);

   tr.appendChild(td_Spanish);

   tr.appendChild(td_Portuguese);

   tr.appendChild(td_del_link);
 
   tbody.appendChild(tr);
 
   dyn_table_hide_languages();

}
 
// remove specified category/row

function dyn_table_del_category(category_id) {

   var tr = document.getElementById("category"+category_id);

   if (!tr) {

      return;

   }

   tr.parentNode.removeChild(tr);
 
   // must decrement category_id value of all subsequent rows

   while (true) {

      category_id++;

      var new_category_id = category_id - 1;

      tr = document.getElementById("category"+category_id);

      if (!tr) {

         break;

      }

      var children = tr.childNodes;

      tr.setAttribute("id", "category"+new_category_id);
 
      // I tried avoiding 'innerHTML', but that didn't help
 
      //children[0].innerHTML = "";

      children[0].removeChild(children[0].childNodes[0]);

      children[0].appendChild(document.createTextNode("Category "+new_category_id+" Name:"));

      children[1].childNodes[0].setAttribute("name", "English"+new_category_id);

      children[1].childNodes[0].setAttribute("id", "English"+new_category_id);

      children[2].childNodes[0].setAttribute("name", "Spanish"+new_category_id);

      children[2].childNodes[0].setAttribute("id", "Spanish"+new_category_id);

      children[3].childNodes[0].setAttribute("name", "Portuguese"+new_category_id);

      children[3].childNodes[0].setAttribute("id", "Portuguese"+new_category_id);

      children[4].childNodes[0].setAttribute("id", "del_category"+new_category_id);

      children[4].childNodes[0].setAttribute("href", "javascript:dyn_table_del_category("+new_category_id+")");
 
      var a_del_link = document.createElement("a");

      a_del_link.setAttribute("id", "del_category"+new_category_id);

      a_del_link.setAttribute("href", "javascript:dyn_table_del_category("+new_category_id+")");

      a_del_link.appendChild(document.createTextNode("Delete Category "+new_category_id));
 
      //children[4].childNodes[0].innerHTML = "";

      children[4].removeChild(children[4].childNodes[0]);

      children[4].appendChild(a_del_link);

   }

}

</script>

</head>

<body>

<form method="post">

<div id="dyn_table" class="channel_fields">

   <div class="box dark">

      <div class="left">Languages:</div>

      <div class="right">

         <input type="checkbox" name="dyn_table[languages][]" id="cbEnglish" value="English" checked="checked" onclick="dyn_table_change_language('English')"/>English &nbsp;

         <input type="checkbox" name="dyn_table[languages][]" id="cbSpanish" value="Spanish" checked="checked" onclick="dyn_table_change_language('Spanish')"/>Spanish &nbsp;

         <input type="checkbox" name="dyn_table[languages][]" id="cbPortuguese" value="Portuguese" onclick="dyn_table_change_language('Portuguese')"/>Portuguese

      </div>

      <br clear="both"/><br/>

   </div>

   <div class="box dark">

      <table border="0" cellspacing="0">

      <!-- IE7 requires the tbody tag when appending/removing children with JS -->

      <tbody id="dyn_table_categories">

      <tr>

         <td class="left">&nbsp;</td>

         <td class="English">English</td>

         <td class="Spanish">Spanish</td>

         <td class="Portuguese" style="display:none">Portuguese</td>

         <td>&nbsp;</td>

      </tr>

      <tr id="category1">

         <td class="left">Category 1 Name:</td>

         <td class="English"><input type="text" name="English1" id="English1"/></td>

         <td class="Spanish"><input type="text" name="Spanish1" id="Spanish1"/></td>

         <td class="Portuguese" style="display:none"><input type="text" name="Portuguese1" id="Portuguese1"/></td>

         <td>&nbsp;</td>

      </tr>

      </tbody>

      </table>

      <div class="left"><a href="javascript:dyn_table_add_category()">Add New Category</a></div>

   </div>

</div>

</form>

</body>

</html>

Jun 24 '07 #1

Subscribe Reply

3045

bumpy

New Member

Ah, I found the solution. All I had to do was use an empty string value for the 'display' CSS property instead of 'block' because display:block isn't valid CSS for tables and table elements:

Expand|Select|Wrap|Line Numbers

cells[i].style.display = cb.checked ? "" : "none";

rather than

Expand|Select|Wrap|Line Numbers

cells[i].style.display = cb.checked ? "block" : "none";

Jun 24 '07 #2

by: The_Original_MB | last post by:

I have a task to create tables dynamically, using the javascript DOM. The current method uses a 1px x 1px IFRAME to loop through some data generation stuff, and then call JS functions in the parent...

Javascript

Resize table problem in Firefox for Web App

by: Giggle Girl | last post by:

Hi there, I am having a problem with the behavior of Firefox, where lefthand column content is not resized properly after it is "collapsed" and then "re-expanded". An online demo is available...

Javascript

117

grid structures: TABLE/TR/TD vs. DIV

by: phil-news-nospam | last post by:

Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...

HTML / CSS

Dynamic form fields added with appendChild or innerHTML do not POST on submit in Firefox

by: Derek Basch | last post by:

I spent several hours struggling with dynamic form fields added with appendChild or innerHTML not POSTing on submit in Firefox. The only way I found to make it work is to append any created fields...

Javascript

Dynamic Content in High-Traffic Sites

by: pbd22 | last post by:

Hi. This is just a disaster management question. I am using XMLHTTP for the dynamic loading of content in a very crucial area of my web site. Same as an IFrame, but using XMLHTTP and a DIV. I...

Javascript

mouseover function not work on firefox with dynamic created dropdown menu

by: SunshineInTheRain | last post by:

The following code is dynamic create dropdownmenu which data within pulled from database However, the code work well on IE but not on Firefox. On Firefox, the whole mouseover and mouseout function...

Javascript

dynamic table issue in Firefox

by: pinson.nick | last post by:

I've been playing around with dynamic tables for the last couple days and have run into some interesting issues. I know how to work around this issue, but was wondering if anyone had any insight as...

Javascript

Using the * for dynamic height

by: Rabel | last post by:

I have a page that is using tables (please no comments about this - I understand it should be css but firefox created this template) I have a menu down the left side and the bottom is supposed to...

HTML / CSS

Passing event as parameter to dynamic function

by: Ron | last post by:

Hi, I'm using javascript to dynamically generate a table (ajax/xml). What I want to achieve is when a table cell is clicked it needs to call a function and pass the event as a parameter (In IE I...

Javascript

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

Dynamic Table works in IE but not Firefox

Similar topics