Easy Learning JavaScript 23: DOM Programming learning Operations Table

Create a table using HTML tags:

Code:

<span style = "font-size: 18px;"> <table border = "1px" width = "300px">
        <caption> Staff table </ caption>
        <thead>
              <tr>
                  <th> Name </ th>
                  <th> Gender </ th>
                  <th> Age </ th>
              </ tr>
        </ thead>
        <tbody>
              <tr>
                  <td> Zhang San </ td>
                  <td> Male </ td>
                  <td> 20 </ td>
              </ tr>
              <tr>
                  <td> Li Si </ td>
                  <td> Female </ td>
                  <td> 22 </ td>
              </ tr>
        </ tbody>
        <tfoot>
              <tr>
                 <td colspan = "3"> Total: N </ td>
              </ tr>
        </ tfoot>
</ table> </ span>

Operation Result:

Regardless of the way you create a table, it's important to note that:

(1) Caption label, THEAD label, TFOOT label in a table can only have one

(2) tbody label, tr label, TH tag, TD label can have n in a table

Two using the DOM to create a table

<span style = "font-size: 18px;"> window.onload = function () {
     var table = document.createElement ("table");
     document.body.appendChild (table);
     // Add attributes to the table
     table.width = 300;
     table.border = 1;
     // Create the title of the table
     var caption = document.createElement ("caption");
     table.appendChild (caption);
     // Add content to the title of the table
     caption.innerHTML = "staff table"; // non-W3c standard method
     // Create the first row of the table, which is a header row
     var thead = document.createElement ("thead");
     table.appendChild (thead);
     var tr1 = document.createElement ("tr");
     thead.appendChild (tr1);
     // Create column
     var th1 = document.createElement ("th");
     tr1.appendChild (th1);
     th1.innerHTML = "name";
     var th2 = document.createElement ("th");
     tr1.appendChild (th2);
     th2.innerHTML = "Gender";
     var th3 = document.createElement ("th");
     tr1.appendChild (th3);
     th3.innerHTML = "age";
     // Create the second row of the table, which is a content row
     var tbody = document.createElement ("tbody");
     table.appendChild (tbody);
     var tr2 = document.createElement ("tr");
     tbody.appendChild (tr2);
     // Create column
     var td1 = document.createElement ("td");
     tr2.appendChild (td1);
     td1.innerHTML = "张三";
     var td2 = document.createElement ("td");
     tr2.appendChild (td2);
     td2.innerHTML = "男";
     var td3 = document.createElement ("td");
     tr2.appendChild (td3);
     td3.innerHTML = "20";
     // Create the third row of the table, which is a content row
     var tr3 = document.createElement ("tr");
     tbody.appendChild (tr3);
     // Create column
     var td4 = document.createElement ("td");
     tr3.appendChild (td4);
     td4.innerHTML = "张三";
     var td5 = document.createElement ("td");
     tr3.appendChild (td5);
     td5.innerHTML = "男";
     var td6 = document.createElement ("td");
     tr3.appendChild (td6);
     td6.innerHTML = "20";
}; </ span>

It is not found that using the DOM to create a table is cumbersome, there are a lot of tags to create and the content to add, which can cause a lot of code and note

We do not recommend it.

Three Create a table using the HTML DOM

To solve the tedious problem of using DOM to create tables, we then use the HTML DOM to create the same table.

HTML DOM provides attributes and methods for element tags

Attributes and methods added by the <tbody> element

Attributes and methods added by the <tr> element

So we're going to create the same table:

<span style = "font-size: 18px;"> window.onload = function () {
     // Create a table by HTML DOM
     var table = document.createElement ("table");
     document.body.appendChild (table);
     table.border = 1;
     table.width = 300;
      // Create table caption using createCaption ()
     table.createCaption (). innerHTML = "person table";
     // Use createTHead () to create a header line
     var thead = table.createTHead (); // The method returns a reference
     var tr1 = thead.insertRow (0);
     // Create column
     var th1 = document.createElement ("th");
     tr1.appendChild (th1);
     th1.innerHTML = "name";
     var th2 = document.createElement ("th");
     tr1.appendChild (th2);
     th2.innerHTML = "Gender";
     var th3 = document.createElement ("th");
     tr1.appendChild (th3);
     th3.innerHTML = "age";
     // Create the second line of content
     var tbody = document.createElement ("tbody");
     table.appendChild (tbody);
     var tr2 = tbody.insertRow (0); // This method returns a reference
     var td1 = tr2.insertCell (0);
     td1.innerHTML = "张三";
     var td2 = tr2.insertCell (1);
     td2.innerHTML = "男";
     var td3 = tr2.insertCell (2);
     td3.innerHTML = "20";
     // Create the second line of content
     var tr3 = tbody.insertRow (1); // This method returns a reference
     var td4 = tr3.insertCell (0);
     td4.innerHTML = "李四";
     var td5 = tr3.insertCell (1);
     td5.innerHTML = "female";
     var td6 = tr3.insertCell (2);
     td6.innerHTML = "22";
}; </ span>

It is important to note that there is no specific method for,<table> label,<tbody> tags and <th> tags when creating a table, you need to use the

method to create the.

Four using the DOM to get tabular data

<span style = "font-size: 18px;"> // Because the form taken in the HTML document is the first
var table1 = document.getElementsByTagName ("table") [0];
alert (table1); // Return: object HTMLTableElement
alert (table1.children); // Return: object HTMLCollection
alert (table1.children.length) // Return: 4, which respectively represent the caption tag, thead tag, the tbody tag and the tfoot tag
alert (table1.children [1] .children [0] .children [0] .innerHTML); // Return: name </ span>

We still see that using DOM operations to get tabular data is a lot of hierarchy and is still cumbersome to use, so we can still use HTML

Dom to get the tabular data.

Five using the HTML DOM to get tabular data

<span style = "font-size: 18px;"> // Use HTMLDOM to get table elements
var table = document.getElementsByTagName ("table") [0];
// Press HTM LDOM to get the form's <caption>
alert (table.caption.innerHTML); // Return: staff table
alert (table.tHead); // Get the table header
alert (table.tHead.rows [0] .cells [0] .innerHTML); // Return: name
// Get the table body by HTML DOM <tbody>
alert (table.tBodies.length); // Return: 1
alert (table.tBodies [0] .rows [0] .cells [0] .innerHTML); // Return: Zhang San </ span> 

In a table <thead> tags and <tfoot> tags are unique and can only have one. And the <tbody> tag is not the only one that can have multiple, so

The <thead> tag and <tfoot> tag that resulted in the last return are element references, and the <tbody> tag returns the collection of elements. Of course we can also use

The HTML DOM operates on tabular data, such as setting data values and deleting cell data, so that it is no longer one by one narrated and can be tried on its own.

Dom and HTML DOM create tables and get tabular data is cumbersome, but in practical applications, if used, we can correctly use the simple

Single method implementation, do not increase the amount of code, resulting in the number of JS code.

There is one more question that needs to be explained:

the difference and connection between JavaScript and HTML DOM    

=========================================================================

Difference:

Javascript

JavaScript is the most popular browser scripting language on the Internet. It's easy to use! You're going to love it!

JavaScript is used by millions of of pages to improve design, verify forms, detect browsers, create cookies, and more.

HTML DOM

The HTML DOM is the standard (the English abbreviation for the HTML Document Object model, document object models for HTML).

The HTML DOM defines a series of standard objects for HTML, as well as a standard way to access and manipulate HTML documents.

Through the DOM, you can access all the HTML elements, along with the text and attributes they contain. The content can be modified and deleted, while

You can also create a new element.

the HTML DOM is independent of the platform and programming language. It can be used by any programming language such as Java, JavaScript, and VBScript.
=========================================================================

Contact:

With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page.

To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This entrance, together with the

HTML The methods and properties that elements are added, moved, changed, or removed are obtained through the Document Object Model (DOM).

JavaScript mainly uses the HTML DOM to get, change, create HTML elements, so as to beautify the page, manipulate page elements of the goal. Because

For this, the most common in JavaScript is the various HTML DOM elements and their respective attributes. In addition to these DOM elements,

JavaScript has its own objects, such as arrays.

Simply put, you can think of JavaScript primarily as manipulating HTML DOM. The two are not the same.

JavaScript is a language, and Dom is a model that can dynamically modify documents in a variety of languages, not just js,php.

=========================================================================

Looking through the Internet to see this is still very detailed, but I still do not understand, with in-depth, access will understand it.

Easy Learning JavaScript 23: DOM Programming learning Operations Table