 <html>
<head>
<title>使用混合方式創建類實例</title>
</head>
<body>
<div>
<table border="1" class="holder" cellspacing="0" width="300" height="20">
<caption>人員名單</caption>
<tbody id="personList">
<TR>
<TH width="50">ID</TH>
<TH>姓名</TH>
<TH width="100">年齡</TH>
</TR>
</tbody>
</table>
</div>
<hr/>
<div>
姓名:<input type="text" name="name"/><br/>
年齡:<input type="text" name="age"/><br/>
<input type="button" name="btn" value="提交"/><br/>
</div>
</body>
</html>
  <script language="javascript">
 <!--
  function $(id){
return document.getElementById(id);
 }
window.onload=function(){
$("btn").onclick=function(){
var emp=new Employee($("name").value,$("age").value);
$("personList").appendChild(emp.getInfoLine());
$("name").value="";
$("age").value="";
}
}
var sn=0;
function Employee(name,age){
sn++;
this.name=name;
this.age=age;
}
Employee.prototype.getName=function(){
return this.name;
}
Employee.prototype.getAge=function(){
return this.age;
}
Employee.prototype.getInfoLine=function(){
var row=document.createElement("tr");
row.setAttribute("height",20);
var cell1=document.createElement("td");
cell1.appendChild(document.createTextNode(sn));
row.appendChild(cell1);
var cell2=document.createElement("td");
cell2.appendChild(document.createTextNode(this.name));
row.appendChild(cell2);
var cell3=document.createElement("td");
cell3.appendChild(document.createTextNode(this.age));
row.appendChild(cell3);
return row;
}
 //-->
</script>
|