table表格-新增-删除
<style>
table{
border-collapse: collapse;
}
table td{
width: 100px;
line-height: 30px;
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
姓名: <input type="text"><br>
年龄: <input type="number" min="18" max="250"><br>
姓名: 男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"> <br>
城市: <select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
</select><br>
<button name="add">添加</button>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>城市</td>
<td>删除</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
/*
1, 获取标签对象和设定数据
arr数组数据---模拟后台数据库数据
数组中存储对象
tbody标签对象
获取添加button按钮对象
2, 调用执行生成页面函数
setTab();
3, 数据添加操作
给添加button标签,添加点击事件
1,获取所有数据标签的参数
姓名标签,input标签对象.value
年龄标签,input标签对象.value
城市标签,select标签对象.value
性别数据: 选中的单元框,获取数据
获取所有的单选标签 --- 结果是一个伪数组
在循环外定义变量, 存储 获取数据的结果
循环遍历数组 参数 是 单选标签对象
参数.checked 是 true 表示这个标签被选中
循环外定义的变量 = 参数.value 数据参数
2, 将数据定义为对象的形式,对象的结果比与数组的结构相同
数据,就是之前获取到的标签中的数据参数
3, 将对象,写入到数组中
arr.push(对象)
4, 根据新的数组,重新渲染页面,重新调用函数
setTab();
4, 定义生成页面函数 --- setTab
1,定义变量,赋值空字符串,作用是存储拼接生成的表格内容标签
2,循环遍历arr数组,根据数组内容,生成table表格内容 参数1,参数2
参数1:存储数值的数据,也就是对象
参数2,存储数据的索引,也就是对象对应的索引
2-1,拼接tr起始标签
2-2,拼接 序号单元格 , 内容是 对象单元 对应的 的索引 加1 参数2+1
2-3,循环遍历 对象 也就是 参数1
拼接 内容单元格 , 是对象的 具体数据
通过对象的属性来获取
2-4,拼接 删除单元格 , 内容是 button按钮
给button按钮,添加自定义属性,属性值 是 对象的索引,也就是参数1
2-5,拼接 tr结束标签
3,将拼接好的字符串,写入到页面中
给tbody中写入字符串内容
oTb.innerHTML = str
4,调用删除函数
给tbody中,已经生成的button删除按钮
绑定事件,添加删除效果
del()
5,定义删除功能函数 del
在生成页面的函数中,setTab()函数中,调用del函数
位置必须是 oTb.innerHTML = str 代码之后
oTb.innerHTML = str 执行的是将标签写入到tbody中
执行完之后,tbody才有内容,才有删除button按钮
1,获取所有的删除标签 , 结果是一个伪数组
2,循环遍历伪数组 forEach()
参数1:标签对象,也就是 删除button按钮
参数2:标签对应,对应的索引下标 (不用)
给标签参数1 添加 点击事件
获取点击标签的自定义属性,属性值
这个属性值也就是要删除的对象,在数组中的索引
根据索引,从数组中删除单元
arr.splice(索引,1)
根据新的数组,再次渲染生成新的table表格
setTab()
*/
// 建立数组,模拟数据库的数据
var arr = [
{name:'张三',age:18,sex:'男',city:'北京'},
{name:'李四',age:19,sex:'女',city:'上海'},
{name:'王五',age:20,sex:'男',city:'广州'},
{name:'赵六',age:21,sex:'女',city:'重庆'},
{name:'刘七',age:22,sex:'保密',city:'天津'},
];
// 获取tbody标签对象
var oTb = document.querySelector('tbody');
// 获取添加button按钮对象
var oBtnAdd = document.querySelector('[name="add"]');
// 调用生成页面函数
setTab();
// 新增数据操作
oBtnAdd.onclick = function(){
// 1,获取数据
var oIptName = document.querySelector('[type="text"]').value;
var oIptAge = document.querySelector('[type="number"]').value;
var oIptCity = document.querySelector('select').value;
var oIptSex = document.querySelectorAll('[type="radio"]');
var oIptSexValue = 0;
oIptSex.forEach(function(item){
if(item.checked === true){
oIptSexValue = item.value;
}
})
// 2,创建对象
var obj = {
name:oIptName,
age:oIptAge,
sex:oIptSexValue,
city:oIptCity,
}
// 3,将对象,写入数据
arr.push(obj);
// 4,根据新的数据,重新渲染生成新的table表格
setTab();
}
// 渲染页面函数
function setTab(){
// 定义空字符串
var str = '';
// 循环遍历数组,生成页面内容字符串
arr.forEach(function(item , key){
// 拼接tr起始标签
str += '<tr>';
// 拼接序号单元格
str += `<td>${key+1}</td>`;
// 循环对象,拼接生成内容单元格
for(var k in item){
str += `<td>${item[k]}</td>`;
}
// 拼接删除单元格
str += `<td><button index="${key}">删除</button></td>`;
// 拼接tr结束标签
str += '</tr>';
})
// 将生成的字符串内容,写入tbody标签
oTb.innerHTML = str;
// 调用删除函数,给删除button标签,添加点击效果
del();
}
// 删除函数
function del(){
// 获取删除button标签对象
var oBtnDel = document.querySelectorAll('tbody button');
// 循环遍历伪数组
oBtnDel.forEach(function(item){
// 给删除标签,添加点击事件
item.onclick = function(){
// 获取标签index属性的属性值
var index = item.getAttribute('index');
// 删除对应的对象单元
arr.splice(index , 1);
// 根据新的数组,重新渲染生成新的页面
setTab();
}
})
}
</script>
</body>
