收藏
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="" onsubmit="return tijiao(this)">
ID: <input type="text" name="id"><br/>
Name: <input type="text" name="name"><br/>
Sex : <input type="text" name="sex"><br/>
Age : <input type="text" name="age"><br/>
City: <input type="text" name="city"><br/>
<input type="submit" value="添加">
</form>
<table id="mytab" align="center" width="800" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Sex</td>
<td>Age</td>
<td>City</td>
<td>Action</td>
</tr>
<tr>
<td>1</td>
<td>Jack</td>
<td>人妖</td>
<td>18</td>
<td>泰國</td>
<td><button onclick="del(this)">刪除</button></td>
</tr>
<tr>
<td>2</td>
<td>Jack</td>
<td>人妖</td>
<td>18</td>
<td>泰國</td>
<td><button onclick="del(this)">刪除</button></td>
</tr>
<tr>
<td>3</td>
<td>Jack</td>
<td>人妖</td>
<td>18</td>
<td>泰國</td>
<td><button onclick="del(this)">刪除</button></td>
</tr>
<tr>
<td>4</td>
<td>Jack</td>
<td>人妖</td>
<td>18</td>
<td>泰國</td>
<td><button onclick="del(this)">刪除</button></td>
</tr>
<tr>
<td>5</td>
<td>Jack</td>
<td>人妖</td>
<td>18</td>
<td>泰國</td>
<td><button onclick="del(this)">刪除</button></td>
</tr>
</table>
</body>
<script type="text/javascript">
var mytab = document.getElementById('mytab');
function tijiao(obj){
//動(dòng)態(tài)創(chuàng)建一行
var row = mytab.insertRow();
//添加單元格
//我們主要將input里面的值寫入到表格中
//可以直接獲取input里面的值,我們可以通過form表單對(duì)下面的Input標(biāo)簽里面的name屬性的值來獲取相應(yīng)的內(nèi)容
row.insertCell().innerHTML = obj.id.value;
row.insertCell().innerHTML = obj.name.value;
row.insertCell().innerHTML = obj.sex.value;
row.insertCell().innerHTML = obj.age.value;
row.insertCell().innerHTML = obj.city.value;
row.insertCell().innerHTML = '<button onclick="del(this)">刪除</button>';
//清空表單
//直接調(diào)用重置時(shí)間
obj.reset();
//阻止頁面提交操作
return false;
}
function del(obj){
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)