青傑JavaScript学習ノート
3787 ワード
この二日間は少し時間がかかりました.JavaScriptの基本的な使い方を復習しました.それと同じように、メモを取ってください.バックアップの前に簡単な例を見せてください.ソースコードのセットはダウンロードできます.
以下のコードは主にJsで表の内容を動的に増加して削除することを実証した.
htmlページ:
jsファイル:
以下のコードは主にJsで表の内容を動的に増加して削除することを実証した.
htmlページ:
<!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=gbk">
<title> </title>
<script language="JavaScript"
type="text/javascript"
src="fatClient.js"></script>
</head>
<body>
<h2 align="center"><font color="blue"> </font></h2>
<hr />
：<input type="text" id="userName" />
<input type="button" name="addUser" value=" " onclick="addNewUser();" />
<br />
<table border="1">
<tr >
<td> ID</td>
<td> </td>
<td> </td>
</tr>
<tbody id="userTable"></tbody>
</table>
</body>
</html>jsファイル:
// ID
var userID = 0;
//
function addNewUser()
{
//
var userName = document.getElementById("userName").value;
if(userName=="")
{
window.alert(" ！");
return ;
}
// ID ，
var id = ++userID;
//
var row = document.createElement("tr");
//
row.setAttribute("id",id+userName);
// ID
var column_cell1 = document.createElement("td");
column_cell1.appendChild(document.createTextNode(id));
row.appendChild(column_cell1);
//
var column_cell2 = document.createElement("td");
column_cell2.appendChild(document.createTextNode(userName));
row.appendChild(column_cell2);
//
var column_cell3 = document.createElement("td");
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value"," ");
// js
//deleteButton.setAttribute("onclick","deleteUser('"+id+userName+"');");// IE ， FireFox 。
deleteButton.onclick=function(){deleteUser(userID+userName);};
/**
* id userID ？
* userID ， deleteUser(userID+userName),
* userName ， userID 。
* userID java ？？ ？？
**/
column_cell3.appendChild(deleteButton);
row.appendChild(column_cell3);
// table
var tbody = document.getElementById("userTable");
tbody.appendChild(row);
//
document.getElementById("userName").value="";
}
//
function deleteUser(id)
{
window.alert(" id ："+id);
var user = document.getElementById(id);
var confirm = window.confirm(" "+user.id+" ？");
if(confirm)
{
var rowToDelete = document.getElementById(id);
var userList = document.getElementById("userTable");
//
userList.removeChild(rowToDelete);
}
}