Dom tables and Forms basics sharing

I am Mu Qing, long time no see. It's going to be a holiday now, and it's a little more busy. Let's talk about the basics of tables and forms today. The previous writing is a relatively basic knowledge, the latter will slowly increase the instance. Let's learn it together.

Looking at the table first, the DOM provides some attributes that allow us to get the form node: tbodies tHead tFoot rows (rows) cells (columns) (all with S is obtained is a set of elements)

var otab = document.getElementById (' tab '); otab.tbodies[// Gets the first of the second row

Note that when writing a form, it is best to add tbody, you do not add the page will automatically help you add tbody so write your own when it is best to add. Table content is relatively simple, the following directly look at the form

The first is the acquisition of the form node : All the form nodes can not only be obtained by the JS method with ID, etc., the DOM gives us the method that can be obtained directly from the name, and any browser is supported. (TheName property is very important in the form, because the backend is the way to identify the property, so there is no name, you cannot submit the data, you must remember to write .) Following

  var oform = document.getElementById (' Form1 ');   // 1 <form id= "Form1" >     <input type= "text" name= "Text1" value= "1" >
</form>

Note: If it is a group of elements, the name will be the same, such as the following radio box radio, so the choice of male when the female will not be selected, to achieve the effect of the single selection. The checkbox and radio are the same.

var oform = document.getElementById (' Form1 '); <form id= "Form1" >     <input type= "Radio" name= ' Sex ' value= "man" >     man <input type= "Radio "Name= ' sex ' value=" woman ">woman// This time oform.sex gets a set of elements, is an array of classes, Oform.sex[0] oform.sex[1] , you can also use loops when visiting. 

In the drop-down list, value refers to the values in the following list with the selected property

alert (OForm.city.value); //  //The value here is the value in the following list with the selected property <select name= "City" value= ">        <option value=" "> Please select cities </option>        <option value= "Beijing" > Beijing </option>        <option value= "Shanghai" selected> Shanghai </ Option>       </select>

Then take a look at some of the common events of the form:
onchange(triggers when the cursor leaves when compared to changes in the original content) in different forms and browsers, there are differences, as follows:

text : When the cursor leaves the text box to determine whether the value has changed, if there is a change to trigger the onchange event

Radio/checkbox: when clicked on a standard browser, the onchange event is triggered whenever the value changes, regardless of whether the focus is left or not. The non-standard down focus is triggered if the value changes.

Select: whenever an element is selected and the original is different, it is triggered.

varOform = document.getElementById (' Form1 ')); OForm.text1.onchange=function() {alert ( This. value);//1} for(varI =0;i<oform.sex.length;i++) {Oform.sex[i].onchange=function() {alert ( This. Value); }}oform.city.onchange=function() {alert ( This. value);//Shanghai} <form id= "Form1" > <input type= "text" name= "Text1" value= "1" > <input type= "Radio" name= ' Sex ' value= " Man ">Mans<input type= "Radio" name= ' Sex ' value= ' woman ' >woman<select name= "City" value= "> <option value=" "> Please select cities </option> <option value=" Beijing "> Beijing & lt;/option> <option value= "Shanghai" selected> Shanghai </option> </select></form>

onsubmit: triggered when the form is submitted.
Example: The user does not enter the content when the submission is not allowed.

function () {    if(this. Text1.value = = ") {        alert (' Please enter content ');        return false ;  The default behavior of the browser is to commit to the specified address, so we do not allow commit, we need to block the default behavior   }}

A Commit method is also available in the DOM: Submit (): Submitting the form
Example: Want to have the form automatically submitted after a period of time
SetTimeout (function () {

Oform.submit ();

},1000)//automatic submission of forms

onreset : Triggered when the form is reset.

Example: When a reset is clicked, the user is reminded.

function () {   var re =  confirm (' Are you sure you want to reset it ');   When the user clicks OK re for true cancel for false  return  re;} // confirm default Pop-up dialog box let the user choose OK or cancel, it has a return value, determined to be true cancellation is false, and only after the user makes a choice to point to the subsequent code, so the selection result as a return value, select Cancel, will block the default event

All right, today's knowledge sharing is complete. Not to be scattered.

Dom tables and Forms basics sharing