Tutorial on using DOM to control tables and forms in javascript

Use DOM to control tables

Common Table DOM

The insertRow () and insertCell () methods are commonly used to add tables.

Row is calculated from scratch, for example:

Var oTr = document. getElementById ("member"). insertRow (2)

Adds a new row to the second row.

Var aText = new Array ();
AText [0] = document. createTextNode ("fresheggs ");
AText [1] = document. createTextNode ("W610 ");
AText [2] = document. createTextNode ("Nov 5th ");
AText [3] = document. createTextNode ("Scorpio ");
AText [4] = document. createTextNode ("1038818 ");
For (var I = 0; I <aText. length; I ++ ){
Var oTd = oTr. insertCell (I );
OTd. appendChild (aText [I]);
    }

The oTr variable inserts a new row into the table, and insertCell inserts new data into the row. createTextNode is used to create a new text node, and oTd is the new cell in appendChild.

1. Insert a row (add table dynamically)


<Script type = "text/javascript">
Window. onload = function (){
Var oTr = document. getElementById ("member"). insertRow (2); // Insert a row
Var aText = new Array ();
AText [0] = document. createTextNode ("fresheggs ");
AText [1] = document. createTextNode ("W610 ");
AText [2] = document. createTextNode ("Nov 5th ");
AText [3] = document. createTextNode ("Scorpio ");
AText [4] = document. createTextNode ("1038818 ");
For (var I = 0; I <aText. length; I ++ ){
Var oTd = oTr. insertCell (I );
OTd. appendChild (aText [I]);
    }
}
</Script>

<Table class = "datalist" summary = "list of members in EE Studay" id = "member">
<Caption> Member List </caption>
<Tr>
<Th scope = "col"> Name </th>
<Th scope = "col"> Class </th>
<Th scope = "col"> Birthday </th>
<Th scope = "col"> Constellation </th>
<Th scope = "col"> Mobile </th>
</Tr>
<Tr>
<Td> isaac </td>
<Td> W13 </td>
<Td> Jun 24th </td>
<Td> Cancer </td>
<Td> 1118159 </td>
</Tr>
<Tr>
<Td> girlwing </td>
<Td> W210 </td>
<Td> Sep 16th </td>
<Td> Virgo </td>
<Td> 1307994 </td>
</Tr>
<Tr>
<Td> tastestory </td>
<Td> W15 </td>
<Td> Nov 29th </td>
<Td> Sagittarius </td>
<Td> 1095245 </td>
</Tr>
</Table>


2. Modify the table content

After a table is created, you can directly use HtmlDom to operate the table, which is more convenient than document. getElementById () and document. getElementsByTagName.
OTable. rows [I]. cell [j]
The preceding two attributes, rows and cells, are used to easily access row I and column j (both counting from 0) of specific table content ), after obtaining the cell object, you can use the innerHTML attribute to modify the content of Xiang Yu.
For example, modify the content of four rows and five columns to good
You can use the following code:

Var oTable = document. getElementById ("table1 ");
OTable. rows [4]. cells [5]. innerHTML = "good ";

3. Delete table content

Since tables have been added, modified, and deleted.
Delete rows in the table using the deleteRow (I) method, where I is the row number.
Delete a column in the table using the deleteCell (j) method of tr.

The following code deletes the second row of the table and the second column of the third row of the original table.

Var oTable = document. getElementById ("table1 ");
OTable. deleteRow [2];
OTable. rows [2]. deleteCell [3];

The following code deletes the second row of the table and the second column of the third row of the original table. Considering that dynamic deletion does not affect the overall html framework, you can use the dynamic deletion and addition method.


<Script language = "javascript">
Function myDelete (){
Var oTable = document. getElementById ("table1 ");
// Delete the row
This. parentNode. removeChild (this. parentNode. parentNode );
            }
Window. onload = function (){
Var oTable = document. getElementById ("table1 ");
Var oTdd;
// Dynamically add a delete link
For (var I = 1; I <oTable. rows. length; I ++ ){
OTdd = oTable. rows [I]. insertCell (5 );
OTdd. innerHTML = "<a href = '#'> delete </a> ";
OTdd. firstChild. onclick = myDelete; // add a delete event
                }
            }
</Script>
<Table class = "datalist" id = "table1">
<Caption> Member List </caption>
<Tr>
<Th scope = "col"> Name </th>
<Th scope = "col"> Class </th>
<Th scope = "col"> Birthday </th>
<Th scope = "col"> Constellation </th>
<Th scope = "col"> Mobile </th>
</Tr>
<Tr>
<Td> isaac </td>
<Td> W13 </td>
<Td> Jun 24th </td>
<Td> Cancer </td>
<Td> 1118159 </td>
</Tr>
<Tr>
<Td> girlwing </td>
<Td> W210 </td>
<Td> Sep 16th </td>
<Td> Virgo </td>
<Td> 1307994 </td>
</Tr>
<Tr>
<Td> tastestory </td>
<Td> W15 </td>
<Td> Nov 29th </td>
<Td> Sagittarius </td>
<Td> 1095245 </td>
</Tr>
</Table>



Delete column


Function deleteColumn (oTable, iNum ){
// Customize the delete column function, that is, delete the corresponding cell in each row
For (var I = 0; I <oTable. rows. length; I ++)
OTable. rows [I]. deleteCell (iNum );
            }
Window. onload = function (){
Var oTable = document. getElementById ("table1 ");
DeleteColumn (oTable, 2 );
            }



There is no callable method in the DOM for deleting table columns. You need to write the deleteColumn () method by yourself. This method accepts two parameters, one of which is a table object, another parameter is the column number to be deleted. The writing method is very simple. The deleteCell () method is used to delete cells in each row.

Use DOM control forms

1. Form overview

Form <form> is one of the most interactive forms on a webpage. It receives user data in various forms, including drop-down list boxes, single-choice buttons, check boxes, and text boxes, this topic describes common attributes and methods in a form.
In javascript, you can easily operate forms, such as obtaining form data for effective verification, automatically assigning values to form fields, and processing form events.
In this case, each form is parsed as an object, that is, a form object. These objects can be referenced through the document. forms set. For example, a form with the nama attribute of form1 can be used

Document. forms ["form1"]

In addition, you can reference the form object through the index of the form in the document. For example

Document. forms [1]

The second form object in the reference document.

The following is a form element that contains multiple forms. Each element is labeled with a label and bound to an element. By clicking the text, you can specify and select a table to improve the user experience.


<Form method = "post" name = "myForm1" action = "addInfo. aspx">
<P> <label for = "name"> enter your name: </label> <br> <input type = "text" name = "name" id = "name"> </p>
<P> <label for = "passwd"> enter your password: </label> <br> <input type = "password" name = "passwd" id = "passwd"> </p>
<P> <label for = "color"> select your favorite color: </label> <br>
<Select name = "color" id = "color">
<Option value = "red"> red </option>
<Option value = "green"> green </option>
<Option value = "blue"> blue </option>
<Option value = "yellow"> yellow </option>
<Option value = "cyan"> Qing </option>
<Option value = "purple"> purple </option>
</Select> </p>
<P> select your gender: <br>
<Input type = "radio" name = "sex" id = "male" value = "male"> <label for = "male"> male </label> <br>
<Input type = "radio" name = "sex" id = "female" value = "female"> <label for = "female"> female </label> </p>
<P> What do you like: <br>
<Input type = "checkbox" name = "holobby" id = "book" value = "book"> <label for = "book"> reading </label>
<Input type = "checkbox" name = "holobby" id = "net" value = "net"> <label for = "net"> surfing the internet </label>
<Input type = "checkbox" name = "holobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleeping </label> </p>
<P> <label for = "comments"> I want to leave a message: </label> <br> <textarea name = "comments" id = "comments" cols = "30" rows = "4"> </textarea> </p>
<P> <input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit">
<Input type = "reset" name = "btnReset" id = "btnReset" value = "Reset"> </p>
</Form>



Generally, each form element should have the name and id attributes. name is used for handing over to the server, and id is used for binding and functional filtering.

2. Access elements in the form

Elements in the form, whether in the text box, single-choice button, drop-down button, drop-down list box, or other content, are included in the form's elements set, you can use the position of an element in the set or the name attribute of the element to obtain the reference of this element.

Var oForm = document. forms ["form1"] // Obtain the form
Var otextForm = oForm. elements [0]; // obtain the first element
Var otextPasswd = oForm. elements ["passwd"] // gets the element whose name attribute is passwd.

Reference the most effective and intuitive method:

Var otextcomments = oForm. elements. comments; // gets the element whose name attribute is comments.

3. Public attributes and methods

All elements (except hidden elements) in a form have common attributes and methods. Here we will list some common

 

Var oForm = document. forms ["form1"]; // Obtain the form
Var otextcomments = oForm. elements. comments; // gets the element whose name attribute is comments.
Alert (oForm. type); // view the element type

Var otextPasswd = oForm. elements ["passwd"]; // gets the element whose name attribute is passwd.
OtextPasswd. focus (); // focus on a specific element

4. Form submission

The submission in form is completed through buttons or images with button functions.

<Input type = "submit" name = "btnsubmit" id = "btnSubmit" value = "Submit">
<Input type = "image" name = "picSubmit" id = "picSSubmit" src = "Submit.jpg">

When you press the Enter key or click a button, the form can be submitted without additional code. You can use the action attribute in form to check whether a request is submitted.

<Form method = "post" name = "form1" action = "javascript: alert ('submited')"> </form>

When submitting a form, the user may repeatedly click the submit button because the network speed is too slow, which is a great burden on the server. You can disable this behavior by using the disabled attribute. For example:

<Input type = "button" value = "Submit" onclick = "this. disabled = ture; this. form. submit ();"/>