js建立表格

最後更新：2014-07-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style java width io for re

<html>
<head>
<meta content="text/html;charset=utf-8">
<script type="text/javascript">
var ary=new Array();
ary.push( new stud("1","aaa","12","B"));
ary.push( new stud("2","aaa","12","B"));
ary.push( new stud("3","aaa","12","B"));
ary.push( new stud("4","aaa","12","B"));
// alert(ary[0].no+"\t"+ary[0].name);
var g_trobj;
function creatTable(){
s="<table border=‘2px‘>";
//表頭
s+="<tr>"+
"<td width=‘100px‘> </td>"+
"<td width=‘100px‘>NO</td>"+
"<td width=‘100px‘>NAME</td>"+
"<td width=‘100px‘>AGE</td>"+
"<td width=‘100px‘>SEX</td>"+
"<td width=‘100px‘>FUNCTION</td>"+
"</tr>";
//表的內容
for(var i=0;i<ary.length;i++){
var u=ary[i];
s+="<tr>";
s+="<td><input type=‘checkbox‘ name=‘T‘></td>";
s+="<td>"+u.no+"</td>"+
"<td>"+u.name+"</td>"+
"<td>"+u.age+"</td>"+
"<td>"+u.sex+"</td>"+
"<td><input type=‘button‘ value=‘edit‘ onclick=‘tredit(this)‘> "+
"<input type=‘button‘ value=‘delete‘ onclick=‘del(this)‘></td>";
s+="</tr>";

}
//畫tail
s+="<tr>"+
"<td colspan=‘6‘><input type=‘button‘ value=‘selAll‘ onclick=‘al()‘> "+
"<input type=‘button‘ value=‘unselAll‘ onclick=‘unselA()‘> "+
"<input type=‘button‘ value=‘selA‘ onclick=‘delsel()‘></td>"+
"</tr>";

s+="</table>";
var obj=document.getElementById("d1");
obj.innerHTML=s;

}

var buobj=window.event.srcElement;
var tdobj=buobj.parentElement;
var trobj=td.parentElement;
function del(e){

for(var i=0;i<trobj.length;i++){
if(trobj[i]==buobj){
alert(trobj.cells[1]);
}
}
}

function delsel(){

var checkobj=document.getElementsByName("T");
for(var i=0;i<checkobj.length;i++){
if(checkobj[i].checked==true){// 選中
var e=checkobj[i];
var tdobj=e.parentElement;
var trobj=tdobj.parentElement; //找到選中的所在tr行
alert(trobj.cells[1].innerText);
}
}
}
function al(){

var checkobj=document.getElementsByName("T");
for( var i=0;i<checkobj.length;i++){
checkobj[i].checked=true;

}
}
function unselA(){
var checkobj=document.getElementsByName("T");
for(var i=0;i<checkobj.length;i++){
checkobj[i].checked=false;
}
}
function tredit(obj){
var tdobj=obj.parentElement;
var trobj=tdobj.parentElement;
g_trobj=trobj;
var dobj1=document.getElementById("d1");
alert(trobj.cells[1].innerText);

dobj1.style.display="none";

var dobj2=document.getElementById("d2");
myNo.value=g_trobj.cells[1].innerText;
myName.value=g_trobj.cells[2].innerText;
myAge.value=g_trobj.cells[3].innerText;
mySex.value= g_trobj.cells[4].innerText;
dobj2.style.display="block";

}

function updateRow(){
if(confirm("確定更新嗎 ")!=true){return;}

g_trobj.cells[1].innerText=myNo.value;
g_trobj.cells[2].innerText=myName.value;
g_trobj.cells[3].innerText=myAge.value;
g_trobj.cells[4].innerText=mySex.value;
var dobj1=document.getElementById("d1");
dobj1.style.display="block";
var dobj2=document.getElementById("d2");
dobj2.style.display="none";

}

function back(){
var dobj1=document.getElementById("d1");
dobj1.style.display="block";
var dobj2=document.getElementById("d2");
dobj2.style.display="none";
}
function stud(no,name,age,sex){
this.no=no;
this.name=name;
this.age=age;
this.sex=sex;
}

</script>
</head>
<body onload="creatTable()">
<div id="d1">

</div>
<div id="d2" style="display: none">
no :<input type="text" id="myNo"><br/>
name:<input type="text" id="myName"><br>
age :<input type="text" id="myAge"><br>
sex :<input type="text" id="mySex"><br>
<button type="button" value="更新" onclick="updateRow(this)">更新</button>
<button type="button" value="返回" onclick="back()">返回</button>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

js建立表格

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support