- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- JavaScript實(shí)現動(dòng)態(tài)表格效果
本文實(shí)例為大家分享了JavaScript實(shí)現動(dòng)態(tài)表格效果的具體代碼，供大家參考，具體內容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動(dòng)態(tài)表格</title>
<style>
.bigDiv{
width: 600px;
margin: 50px auto;
}
table{
border: solid black 2px;
width: 500px;
/*邊框會(huì )合并為一個(gè)單一的邊框*/
border-collapse: collapse;
}
th{
background-color: darkgray;
/*表頭字體加粗*/
font-weight: bold;
/*字體顏色 #ffffff：白色*/
color: #ffffff;
}
th,td{
border: 1px solid black ;
/*指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度*/
box-sizing: content-box;
text-align: center;
/*指定寬高*/
width: 50px;
height: 30px;
font-size: 14px;
}
.but{
width: 150px;
margin: 5px 400px;
/*讓所有彈性盒模型對象的子元素都有相同的長(cháng)度，且忽略它們內部的內容*/
display: flex;
/*在彈性盒對象的 <div> 元素中的各項周?chē)粲锌瞻?/
justify-content: flex-end;
}
</style>
</head>
<body>
<div class="bigDiv">
<table align="center">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>聯(lián)系電話(huà)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>逍遙</td>
<td>18</td>
<td>男</td>
<td>12354546</td>
</tr>
<tr>
<td>2</td>
<td>小白</td>
<td>19</td>
<td>女</td>
<td>252323523</td>
</tr>
</tbody>
</table>
<div class="but">
<button type="button" onclick="addRow()">添加一行</button>
<button type="button" onclick="saveData()">保存數據</button>
</div>
</div>
<script>
var id;
var name;
var age;
var sex;
var phone;
var tdArr=new Array();
function addRow() {
let tbodyObj = document.getElementsByTagName("tbody")[0];
let trObj = document.createElement("tr");
tbodyObj.appendChild(trObj);
//創(chuàng )建5個(gè)td
for (let i = 0; i < 5; i++) {
let tdObj = document.createElement("td");
trObj.appendChild(tdObj);
//創(chuàng )建input輸入框對象
let inputObj = document.createElement("input");
//設置input對象的id屬性
inputObj.setAttribute("id",i);
//為每一個(gè)輸入框添加一個(gè)失去焦點(diǎn)事件
inputObj.addEventListener("blur",function () {
switch (this.id) {
case "0":
id=this.value;
break;
case "1":
name=this.value;
break;
case "2":
age=this.value;
break;
case "3":
sex=this.value;
break;
case "4":
phone=this.value;
break;
}
});
//隱藏未點(diǎn)擊輸入時(shí)的input邊框
inputObj.style.border="0";
//隱藏點(diǎn)擊輸入時(shí)的邊框
inputObj.style.outline="none";
//設置輸入框寬度
inputObj.style.width="80px";
//設置輸入框高度
inputObj.style.height="25px";
//設置輸入框的外邊距為0
inputObj.style.margin="0";
//將td添加
tdObj.appendChild(inputObj);
//將tdObj添加到tdArr中
tdArr.push(tdObj);
}
}
function saveData() {
tdArr[0].innerHTML=id;
tdArr[1].innerHTML=name;
tdArr[2].innerHTML=age;
tdArr[3].innerHTML=sex;
tdArr[4].innerHTML=phone;
tdArr.length=0;
}
</script>
</body>
</html>
以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
