body onload () event and table insertRow (), tr insertCell ()

onload event:

Definition and Usage:

onload event occurs immediately after the page or image loading is complete.

onload typically used <body> element, after the page is fully loaded (including images, css files, etc.) execute script code.

grammar:

在HTML中：<body onload="SomeJavaScriptCode">

在JavaScropt中：window.onload=function(){SomeJavaScriptCode};

SomeJavaScriptCode necessary. Provisions JavaScript executed when the event occurs. (Code execution)

Example: <body onload = "myFunction ()">

table insertRow () Function Method

Definition and Usage: insertRow () method is used to specify the location in the table to insert a new row.

Syntax: tableObject.insertRow ( index ); index: new row is inserted into the specified position (starting with 0).

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
<script>
function displayResult(){
    var table=document.getElementById("myTable");
    var row=table.insertRow(0);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    cell1.innerHTML="New";
    cell2.innerHTML="New";
}
</script>
</head>
<body>

<table id="myTable" border="1">
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>
<br>
<button type="button" onclick="displayResult()">插入新行</button>

</body>
</html>

tr insertCell () Function Method

Definition and Usage: insertCell () method is used to specify the location of the HTML table row insert an empty <td> element.

Syntax: trObject.insertCell ( index ); index: This method creates a new <td> element, insert it into the position of the line specified. The new cell is located will be inserted before the current bucket index specified location. If the number of cells is equal to the row index, the new cell is added at the end of the line.

Example:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
<script>
function displayResult(){
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="New cell"
}
</script>
</head>
<body>

<table id="myTable" border="1">
    <tr>
        <td>First cell</td>
        <td>Second cell</td>
        <td>Third cell</td>
    </tr>
</table>
<br>
<button type="button" onclick="displayResult()">插入单元格</button>

</body>
</html>

body onload () event and table insertRow (), tr insertCell ()

Guess you like