append rows to a table
In the past experience with Ajax, you would most likely use JavaScript to append rows to an existing table or create a new table from scratch that contains a table row. The Document.createelement and Document.appendchiid methods make this easy, simply by using document.createelement to create table cells, Use the Document.app-endchild method to add these table cells to the table row. The next step in the editing process is to use the document.append-
The child adds the table row to the table.
In the current browsers, such as Firefox, Safari, and opera, this is possible. However, if you are using LE, the table row does not appear in the table. To make matters worse, ie does not even throw any errors, or provide any clues as to whether the table row has actually been appended to the table but does not show up.
In this case, the solution is simple. IE allows the TR element to be added to the TBODY element instead of adding directly to the table element. For example, if you define an empty table as follows:
<table id= "MyTable" >
<tbody id= "Mytablebody" ></tbody>
</table>
The correct way to add rows to this table is to add rows to the table body rather than to the table, as follows:
var cell=document.createelement ("TD"). AppendChild (document.createTextNode ("foo"));
VAT Row=document.createelement ("tr"). appendchild (cell);
Document.getelementbyld ("Mytablebody"). Appendchiid (row);
Sinyun, this approach is available on all current browsers, including IE. If you get into the habit of using the table's body, you don't have to worry about it.
two styles to set elements through JavaScript
With Ajax technology, Web applications created by developers can communicate seamlessly with the server without the need for full page refreshes. However, for A1AX requests, this page will not flicker, so the user may not know that some of the data on the page has been updated. You may want to modify the style of some elements to indicate that some of the data on the page has changed. For example, if the price of a stock has been seamlessly updated through an AJAX request, you can highlight the name of the stock.
You can use JavaScript to set the style of an element by using the setattribute method of the element. For example, to modify the text in a SPAN element to appear in bold red. You can use setattribute therapy as follows:
var spanelement = document.getElementById ("MySpan");
Spanelement.setattribute ("Style", "font-weight:bold; color:red; ");
In addition to IE, this method can be used in other browsers today. For IE, the workaround is to use the Csstext property of the element style object to set the desired style. Although this attribute is not standard, it is widely supported, as follows:
var spanelement = document.getElementById ("MySpan");
SpanElement.style.cssText = "Font-weight:bold; color:red; ";
This method works well on IE and most other browsers, except Opera. To make your code portable in all current browsers, you can use both methods, either by using the SetAttribute method or by using the Csstext property of the element style object, as follows:
var spanelement = document.getElementById ("MySpan");
Spanelement.setattribute ("Style", "font-weight:bold; color:red; ");
SpanElement.style.cssText = "Font-weight:bold; color:red; ";
This allows the style of the element to be set correctly on all current browsers.
third, set the class attribute of the element
After reading the previous section and knowing that you can set the inline style of an element through JavaScript, you might take it for granted that it would be easiest to simply set up a class generic with no elements. Sadly, that is not the case. Similar to setting element inline styles, there are also some peculiarities in dynamically setting the class attribute of an element through JavaScript.
As you may have guessed, ie is an anomaly in the current browser, but the solution is fairly straightforward. When using browsers such as Firefox and Safari, you can use the setattribute method of the element to set the class attribute of the redundancy, as follows:
var element = document.getElementById ("myelement");
Element.setattribute ("Class", "Stylec1ass");
Oddly, if you use the SetAttribute method and you specify that the property name is Class,ie, the element's class attribute is not set. In contrast, IE recognizes the classname attribute itself only when using the SetAttribute method. A complete solution to this situation is to use both class and ClassName as property names when using the element's SetAttribute method, as follows:
var element = document.getElementById ("myelement");
Element.setattribute ("Class", "Stylec1ass");
Element.setattribute ("ClassName", "Stylec1ass");
Most browsers now use the class attribute name and ignore Classname,ie, just the opposite.
Iv. Creating input elements
The INPUT element provides the user with the means to interact with the page. HTML itself has a limited set of input elements, including single-line text boxes, multiline text boxes, selection boxes, buttons, check boxes, and radio buttons. You may want to use Javascfipt to dynamically build such input elements as part of the AJAX implementation.
Single-line text boxes, buttons, check boxes, and radio buttons can all be created as input elements, except that the value of the Type property differs. The selection box and text area have their own unique tags. Creating input elements dynamically through JavaScript is simple (except for radio buttons, which are explained in the "Dig Up a radio button" section), as long as you follow some simple rules. Using the Document.createelement method makes it easy to create selection boxes and text areas, just to the DOCUMENT.CR
Eateelement passes the tag name of the element, such as Select or textarea.
Single-line text boxes, buttons, check boxes, and radio buttons are slightly harder because they all have the same element name input, except that the value of the Type property is different. Therefore, to create these elements, you need to use not only the Document.createelement method, but also the setattribute method of the element to set the value of the Type property. It's not difficult, but it's really an extra line of code.
Consider where to add the newly created INPUT element to its parent element, and you must pay attention to the order of the document.createelement and setattribute statements. In some browsers, only the elements are planed, and when the Type property is set correctly, the newly created element is added to its parent element. For example, the following code snippet may have strange behavior in some browsers:
document.getElementById ("FormElement"). appendchild (button);
Button.setattribute ("Type", "button");
To avoid strange behavior, make sure that the INPUT element is planed to set all its properties, especially the Type property, and then add it to the parent element as follows:
var button = document.createelement ("Input"):
Button.setattribute ("Type", "button");
document.getElementById ("FormElement"). appendchild (button);
Following this simple rule can help eliminate some of the problems that may be difficult to diagnose later.
five-way input elements add things to handlers
Adding an event handler to an INPUT element should be as easy as using the SetAttribute method and specifying the name of the event handler and the name of the function handler you want, right? The standard practice for setting an event handler for an element is to use the setattribute method of the element, which takes the event name as the property name and the function handler as the property value. As shown below:
var formelement = Document,getelementbyid ("FormElement");
Formelement.setattribute ("onclick", "Dofoo ();");
In addition to IE above the code in all current browsers can work. If you use Javascfipt to set an event handler for an element in IE, you must use the Falay reference to the event handler you need for the element, and not assign it to an anonymous function, which needs to invoke the desired handler, as follows:
var formelement = Document,getelementbyid ("FormElement");
Formelement.onclick = function () {Dofoo ();};
Notice how the OnClick event handler is referenced from the formelement by the dot notation. The onclick thing is assigned an anonymous function, which simply invokes the required event handler. In this case, the event handler is Dofoo.
Fortunately, this technology is supported by IE and all other current browsers. Therefore, the event handlers for the form elements can be set dynamically by Javascfipt.
VI. Create radio buttons
The best always stay at the end. Creating radio buttons dynamically through JavaScript is laborious because the method of creating radio buttons in IE is quite different from the way other browsers use it.
In addition to IE, all other browsers currently allow you to create radio buttons (these methods should be possible) by using the following methods:
var RadioButton = document.createelement ("input");
Radiobutton.setattribute ("type", "Radlo");
Radiobutton.setattribute ("name", "RadioButton");
Radiobutton.setattribute ("Value", "checked");
This allows you to create a radio button in all current browsers except IE and work correctly. In Le, radio buttons will indeed show up. But it cannot be selected because clicking on the radio Shing does not make it as we expected. In IE, the method of creating radio buttons is completely different from the methods used by other browsers and is fundamentally incompatible. For the previous set of radio buttons, in IE can be established as follows:
var RadioButton = decument.createelement ("<input type= ' Radio ')
Name= ' RadioButton ' value= ' checked ' > ');
The good news is that in IE it is possible to create a radio button dynamically through JavaScript, but it is difficult and incompatible with other browsers.
How do you overcome this limitation? The answer is simple, and this is the need for some kind of browser sniffing (browser-sniffing) mechanism that allows the script to know which method to use when creating radio buttons. Luckily, you don't have to check out a lot of different browsers. Assuming that only a modern browser is used, the script only needs to differentiate between IE and other browsers.
IE can identify the proprietary properties of the document object known as UniqueID, named UniqueID. IE is also the only browser that recognizes this attribute, so UniqueID is a good fit to determine if the script is running in IE.
By using the Docurnent.uniqueid property to determine which browser the script is running in, you can combine the IE-specific approach with the standard-compatible method, which will get the following code:
if (Document.uniqueid) {
Internet Explorer
var RadioButton = decument.createelement ("<input type= ' Radio ')
Name= ' RadioButton ' value= ' checked ' > ');
}
else {
Standards compliant
var RadioButton = document.createelement ("input");
Radiobutton.setattribute ("type", "Radlo");
Radiobutton.setattribute ("name", "RadioButton");
Radiobutton.setattribute ("Value", "checked");
}
