AJAX動態建立表格例項
阿新 • • 發佈：2018-12-31
[size=medium]初學AJAX,把一些學習的點滴記錄下來!以備以後參考[/size]
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用DOM建立HTML表格</title>
<script type="text/javascript">
function start(){
//獲取body標籤
var body = document.getElementsByTagName("body")[0];
//建立一個<table>元素和一個<tbody>元素
table = document.createElement("table");
tablebody = document.createElement("tbody");
// 將<tablebody>元素新增到<table>
table.appendChild(tablebody);
body.appendChild(table);
//將表格table的border屬性設定為2
table.setAttribute("border","2");
}
function insertRow(){
//建立一個<tr>
current_row = document.createElement("tr");
//建立一個<td>
current_cell = document.createElement("td");
//建立一個文字結點
currenttext = document.createTextNode("單元格");
//將建立的文字結點新增到<td>裡面
current_cell.appendChild(currenttext);
//將建立的<td>新增到<tr>裡面
current_row.appendChild(current_cell);
//將<tr>新增到<tbody>
tablebody.appendChild(current_row);
}
</script>
</head>
<body onload="start()">
<input type="button" onclick="insertRow()" value=增加行>
</body>
</html>