Dynamic DOM Table Creation, Mac Internet Explorer 5.2
Jul 23, 2005
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 window to
generate the tables.
The basic idea is to add a table tag, with a thead and tbody, on the
main parent page, that has display:none set. This then becomes
display:block when there are rows to show. The rows themselves are
added directly to the visible tbody element using appendChild(). When
the results need to be refreshed, the tbody elements are removed, and
then added again.
This works well in most browsers, including Opera. However, Mac IE
always freezes when trying to generate the table, even for the first
time.
I have several different versions, and they all generate the same
issue. The tables I am creating are quite complex: multiple cells,
colspans, images, nested tables, roll over colours, styles etc. At
first, I believed it was an issue with creating images dynamically,
however it now seems that is not the case.
I have also tried creating the table and tbody tags using the DOM and
appending them to a div, but with no luck. I have also tried creating
the tables using a hidden object and then copying the innerHTML / nodes
across to the visible one. The various versions I have cover most
bases:
* using innerHTML to add content to the cells
* using the javascript DOM to create all elements and append them
* using a mixture of the both
If anybody has any feedback or suggestions then it would be really
appreciated, particularly related to the following:
* From your experience, is this realistically possible?
* Is the problem I'm experiencing related to the complexity or size
of the table I am trying to generate? If the table is simple text only,
with 2 or 3 columns and rows, then it does work.
* What is the best method to dynamically create tables and cell
content across browsers, and in Mac IE?
* Is the problem image related? Does anyone have experience of
creating images dynamically in tables in Mac IE? Do you use "new
image()" or createElement()? (using the small table sample, this was
possible using both methods, and also innerHTML on a cell).
I have created some Javascript to make a form application dynamic. My problem is that the code works in every browser except for internet explorer. I get no errors from Firebug and I have made sure that internet explorer has javascript enabled. I am completely in the dark as to why this would be happening. It works perfectly in Firefox, Chrome, and Safari. Here is my entire code for the form, it is for a housing application for a college,
Code: function runAll2 (processPart, areaType, spaceType, mealType) { pp = document.getElementById('fld2416'); at = document.getElementById('fld2417'); st = document.getElementById('fld2418'); mt = document.getElementById('fld2481');
[code]....
This for is supposed to go live on Tuesday and I didnt realize that it wasnt working in IE until today. I am pretty good at HTML and CSS and know a bit about cross browser testing, I just didnt even think about it because this form is entirely ASP and Java, my bad.
I'm dynamically creating a table. I create the <tr>s with five <td>s. I then remove the third <td> and would like to add the cell variable where I removed the td. The creation of the table works, the removal of the td works, now how do I add the cell var where I removed the td? Example here: [URL]
Code JavaScript: function CreateTable() { var array = ["one", "two", "three", "four", "five", "six", "seven", "eight", "one", "one", "three", "seven"]; var listItems = ""; var tbody = $('.tbody'); var cell = $('<td>', { className: 'open', html: 'Open' }); $.each(array, function(index, val) { var row = jQuery('<tr></tr>') .append('<td>' + index + ' - ' + val + '</td><td> open </td><td> open </td><td> open </td><td> open </td>'); $('td:eq(2)', row).css('background-color', '#eee'); $('td:eq(2)', row).remove(); row = row.add(cell); row.appendTo(tbody); }); }
I am making a web page, and as part of it I have a table that the user can add rows to. My code works in FF and Chrome, but IE is broken. function addrow() { var example=document.getElementById("new"); var addHere=document.getElementById("ticketTable"); var node= example.cloneNode(true); node.id="added"; addHere.appendChild(node); } This code is called when a button is clicked. New is the ID of the row I am adding and ticketTable is the ID of the table I am adding to.
I have a function where it add rows into a table. For the example below it adds a row under the Question column, (I have not included whole function as there is a lot of code so instead I have just posted the relevant code.
Code:
//This is inside a function var row = document.createElement("tr"); var cell input,
[code]....
Now my function works really well when it comes to adding a row into a table. The problem is that it works on all major browsers except for Internet Explorer. I have researched an found out that I may need to use insertRow() and insertCell() methods. I don't know how to really apply this into my code so what I want to know is that if somebody knows how to manipulate the code above to include the insertRows and insertCell methods, I know how insertRow() and insertCell is added in the code and I can include this in all of my other columns in the function.
I have a function where it add rows into a table. For the example below it adds a row under the Question column, (I have not included whole function as there is a lot of code so instead I have just posted the relevant code.
Code: //This is inside a function var row = document.createElement("tr");
So this works just fine in FF. In IE7 I am getting this error. I can see my content load in the background, when I hit ok it takes me to a page cannot be displayed page. If I comment out:
The problem is that FF doesn't put the P in the top left corner of the DIV. Rather it seem to push it down by a line height. Is there some white space sneaking into the DIV? How do I get the P right into the top left corner?
can anybody tell me how you can create a new stylesheet inside a (X)HTML page with JavaScript and Firefox, if the stylesheet is only available as a variable value, like:
var CSSStyle = "rect {fill: lightgrey;} circle {fill: red;} polyline {fill: none; stroke: red; stroke-width: 0.3;} text {font-size: 2.5px;} text.text-x-axis {text-anchor: middle;} text.text-y-axis {text-anchor: end;}"
So far, the only workaround I found, was to link an empty stylesheet to the page
I have reason to want to be able to change a Firefox stylesheet rule dynamically. I have found, doing google searches, sites which tell you how to create stylesheets dynamically or just add and delete rules, but none of these pages procedures have worked in my Firefox. Some have worked in Internet Explorer. Most have claimed to be cross browser. An example of one which I had high hopes would work can be found at this link.. The code they give you near the bottom of that page is posted below with the original background color changed to red and some text to see the background color put in the body of the page. In other words I pretty much just pasted the code found their in the head portion of my HTML page.
Attempting to troubleshoot why this code is not working if I use the old alert message method and put an alert message between the lines "var mysheet=document.styleSheets[0]" and the line "var totalrules=mysheet.cssRules? mysheet.cssRules.length : mysheet.rules.length" the mysheet variable region out as being "object CSSStyleSheet", however if I use the newer step through method with firebug it reads undefined. So I am totally baffled. Code:
There is a while loop to keep adding them but wanted to keep it simple. So right now there are three links that get created. I'm trying to find out the value of these links so I can add things to a shopping cart for the user. I have the following jquery to do this:
This part works fine. However how can I get the href value of this and then once I have it basically split it after the = sign to get the value I'm really looking for?
I just wonder if there is a jquery plugin or something that enable me to create a html pagelayout with drag n drop.
Lets say i have a blank page with a div container, then i have a couple of layout elements that i can drag into that container, like 2 coulmn, 1 column, 3 column.
I hope you understund what i mean. something like sitefinitys template builder but in a light version.[URL]
Am developing MonthlyExpenses Project in which we have to enter details according to that date.
Date [IMG]datepickerimage[/IMG] Description Exptype Price
By clicking add button the dynamic row has to appear. But here , when I enter Date , the newdate is overwriting the previous one. New date is not appearing in new text box.
I have a small number of functions on an object and for every function I wish to make a different function that calls the original where the this can be passed as a parameter. I am making a library and this is a convenience method for people who don't know about call/apply.
Currently (one of) my function looks like this:
function _find(){ return find.apply(arguments[0],Array.prototype.slice.call(arguments,1)); }
However since my functions are in a object I was wondering if I could make a new array dynamically?
var func = {'find':find}, func_new={}; //this is just an example I don't have this part in my code for(var attr in func) func_new[attr] = Function('return '+attr+'.apply(arguments[0],Array.prototype.slice.call(arguments,1));');
I'm having trouble figuring out what's going on with IE6's Msxml2.XMLHTTP object. I have two feed addresses in this stripped down version of my code below. Both work fine in Firefox (using the XMLHttpRequest object), but only the thinkgeek one works in IE. In the processFeed function, it shows the problem - the first alert shows 0 for the wikihow feed in IE, though it can still display the responseText. Any insight? Code:
i want to run a bit of js not in ie but in all others within some js i'm doing.is this the way to do it? (got this from o'reilly's js;definitive guide book):
Code: /*@cc_on @if( @_jscript ) ; // nothing for internet explorer[code]....
how should braces be in that, if they should at all? i mean if i wanted multiple lines of js code in the either non-ie or ie blocks how and where would {}'s go?also does that work for ie8?
my site seems to be working perfectly on firefox but when I access it on internet explorer everything loads fine but there is a yellow marker on the status bar of IE saying there are errors on the page. I copied the source into dreamweaver to check for browser specefic bugs but the only bugs that came up were that in Netscape. So any idea why this is happening? The link to my site is in my profile.
I am having trouble with Internet Explorer AGAIN.How do you use the setTimeout for it?This is what I am using and it is working on all of the other browser:Code:setTimeout("growContact(" + (height+20) + ")", 0);
I have a problem, and maybe someone knows the solution.
Context : - Browser : IE 6.0 - Application server : Livewire Pro - Client OS : Windows 98 SE - Server OS : NT4 - I have a frameset, including several pages, but only one will be used for the example. -------- | a | -------- | b | -------- - a form on the main page (a.html i.e.) - a data is manually typed, then I submit the form => the action will redirect to a new page (c.html) - on this new page, I do a history.go(-1), so I'm back on the a.html page, and the data is still there (it's ok) - cache parameters : "check on every page visited"
Problem : - From the main page, if a popup gives the data to the form, so after the submit and the history.go(-1), the form contains NO data !!!
So, the data is lost when the data input is not made by hand.
I have no troubles with Netscape/Mozilla, but only with IE.
