1,定义全局作用域变量
tbody标签对象 数组arr 新增button按钮
2,调用生成table表格函数,生成页面;
setTab();
3,给新增button按钮,添加事件
标签.onclick = funciton(){}
获取数据,姓名,年龄,性别,城市
将四个数据,生成对象,对象的解构与arr数组中的对象,结构一致
将生成的对象,新增写入到arr数组中
根据新的数组,再重新渲染,生成table表格
调用生成table表格的函数 setTab()
4,定义生成table表格函数 setTab函数
定义变量,赋值空字符串,存储拼接生成的字符串内容
循环遍历数组arr 第一个参数存储数据单元的数值,也就是对象,第二个参数存储数据单元对应的索下标
拼接 tr 起始标签
拼接 序号单元格 内容是 数据单元,也就是对象对应的索引下标,第二个参数+1
循环遍历 对象 也就是第一个参数存储的数据单元的数值对象,只能使用for…in循环 自定义变量存储的是对象的属性
拼接 内容单元格 内容是 对象属性存储的属性值 也就是 val[自定义变量]
拼接 删除单元格 内容是 button按钮
给button按钮,添加自定义属性,属性名称是任意名称都行
属性值是 对象对应的索引下标 也就是循环arr时 forEach() 的第二个参数
拼接 tr结束标签
将字符串写入到tbody标签中
调用 给 删除标签,添加事件函数
dele()
说明:因为我们给删除标签添加事件,必须要和渲染生成页面一起执行
每次渲染生成页面,都要给button标签,添加删除事件,因此,这两个操作,必须要绑定执行
我们把这两个操作,都写在渲染生成页面的函数中
5,定义函数,给button标签,添加删除效果 dele函数
获取所有需要添加事件的button按钮,是一个数组
forEach()循环遍历这个数组 , 第一个参数,就是button按钮标签
获取button标签,自定义属性的属性值
按照属性值,执行删除数组单元的操作
arr.splice(属性值 , 1)
根据新的数组,渲染生成新的table表格
再次调用生成table表格函数 setTab();
<body>
姓名：<input type="text"><br>
年龄：<input type="number"><br>
性别：男<input type="radio" value="男" name="same">
女<input type="radio" value="女" name="same"><br>
城市：<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
<option value="广州">广州</option>
<option value="武汉">武汉</option>
</select><br>
<button id="btn1">增加</button>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var oTab=document.querySelector('tbody');
var btn=document.querySelector('#btn1');
var arr=[
{name:'尼古拉斯',age:22,sex:'男',city:'上海'},
{name:'老滑稽',age:21,sex:'女',city:'杭州'},
{name:'卡布达',age:23,sex:'男',city:'上海'},
{name:'蛋蛋',age:22,sex:'女',city:'苏州'},
{name:'老年杨',age:21,sex:'男',city:'武汉'},
];
setTable();
//创建表格
function setTable(){
var str='';
arr.forEach(function(val,key){
str+='<tr>';
str+=`<td>${key+1}</td>`;
for(var attr in val){
str+=`<td>${val[attr]}</td>`;
}
str+=`<td><button class="${key}">删除</button></td>`;
str+='</tr>';
})
oTab.innerHTML=str;
dele();
}
//增加操作
btn.onclick=function(){
var oName=document.querySelector('[type="text"]').value;
var oYear=document.querySelector('[type="number"]').value;
var oSex=document.querySelectorAll('[type="radio"]');
var vSex;
oSex.forEach(function(s_sex){
if(s_sex.checked===true){
vSex=s_sex.value;
}
})
var oCity=document.querySelector('select').value;
// console.log(oCity);
var obj={
name:oName,
year:oYear,
sex:vSex,
city:oCity,
};
arr.push(obj);
setTable();
}
//删除操作
function dele(){
var oDel=document.querySelectorAll('tbody button');
oDel.forEach(function(vDel){
vDel.onclick=function(){
arr.splice(vDel.class,1)
setTable();
}
})
}
</script>
</body>
结果：
点击增加按钮
点击删除按钮：
