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"><br>
性别: 男<input type="radio" value="男" name="sex">
女<input type="radio" value="女" name="sex">
保密<input type="radio" value="保密" name="sex"><br>
城市: <select >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
</select><br>
<button>新增</button>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>城市</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 建立数组,模拟数据库的数据
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:'天津'},
];
// 获取table表格中tbody标签对象
var oTb = document.querySelector('tbody');
// 获取button按钮标签对象
var oBtn = document.querySelector('button');
// 给tbody写入内容
oTb.innerHTML = setTab();
// 点击button按钮,新增数据操作
oBtn.onclick = function(){
// 1,需要先获取input等标签中,写入的数据
// input标签,获取数据是通过标签对象的value属性
// document.querySelector('[type="text"]') 获取标签对象
// document.querySelector('[type="text"]').value 获取标签对象,value的数据
// 获取姓名的数据
var oIptName = document.querySelector('[type="text"]').value;
// 获取年龄的数据
var oIptAge = document.querySelector('[type="number"]').value;
// 获取单选标签,是一个数组
// 如果被选中的标签,checked属性值是true,没有选中的checked属性值是false
var oIptSex = document.querySelectorAll('[type="radio"]');
// 将变量定义在函数之外,是一个全局变量,这样函数之外就可以使用
// 定义变量,存储的是性别的数据
var oIptSexVal = 0;
// 获取数据,要循环遍历,如果 checked属性值是true,获取这个标签的value属性值
oIptSex.forEach(function(item){
// 如果标签 checked 属性,属性值是true,证明是被选中的标签
// 要获取value属性的属性值
if(item.checked === true ){
// 获取当前这个item标签,value的属性值
// 在函数之内对这个变量进行赋值
oIptSexVal = item.value;
// 如果将变量定义在函数之内,只能在函数之内调用
}
})
// select和option标签,配合使用
// 选中option,所表示的数据,会定义在select标签的value属性上
var oIptCity = document.querySelector('select').value;
// 将数据写成一个对象的形式,与数组中存储的对象是相同的形式
var obj = {
name: oIptName ,
age: oIptAge ,
sex: oIptSexVal ,
city:oIptCity
};
// 将这个对象,写入到数组中
arr.push(obj);
// 根据新的数组,重新渲染页面
// 调用函数,生成新的页面内容
oTb.innerHTML = setTab();
}
// 设定函数,生成table表格内容
function setTab(){
// 定义空字符串,存储拼接结果
var str = '';
arr.forEach(function( item , key ){
// 1,拼接tr起始标签
str += '<tr>';
// 2,拼接序号单元格,单元格内容是索引+1
str += `<td>${key+1}</td>`;
// 3,循环拼接内容单元格
// 此时内容的是一个对象,item中存储的是一个对象
// 对象的循环,只能使用 for...in
for(var k in item){
str += `<td>${item[k]}</td>`;
}
// 4,拼接tr结束标签
str += '</tr>';
})
// 定义 字符串为 函数的返回值
return str;
}
总结思路:
- 获取标签对象中,对应的数据信息
input,text,password,number等等,输入框,包裹textarea文本域
输入的数据,都是存储在 value属性中的
标签对象.value 就可以获取到标签value属性中存储的数据,也就是输入的内容
select>option 定义数据是在option中,定义的option标签的value属性
option和select是配合使用的,最终,你选定的option的数据
会记录在select标签,value属性中
select标签对象.value 获取的是下拉列表框中,选定的数据的属性值
radio 定义标签的value属性,以及对应的属性值
标签的checked 属性 如果是 true 表示是被选中的标签
标签对象.checked 获取属性对应的属性值
如果 checked 属性值 是 true 表示这个标示是被单选选中的标签
就获取这个标签的数据,这个标签的数据是value属性中存储的数据
标签对象.value 获取属性值 - 将这些数据信息,也称对象的形式,对象中的格式,与数组中定义的对象格式必须一致
- 将新建立的对象,也就是新的数据信息,写入到数组中
- 重新调用函数,根据新的数组,生成新的字符串,写入到tbody中; 之前写的内容,就会被覆盖掉,重新生成新的内容.
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"><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>
// 建立数组,模拟数据库的数据
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:'天津'},
];
// 获取table中的tbody标签
var oTb = document.querySelector('tbody');
var oBtn = document.querySelector('[name="add"]');
// 不能在函数之外执行生成页面操作了
// oTb.innerHTML = setTab();
// 调用函数,生成页面
// 在函数内部就有生成页面的操作
// 将之前的 oTb.innerHTML = setTab();
// 都直接改成 setTab(); 在函数内部,就完成生成页面操作
setTab();
// button按钮添加点击事件
oBtn.onclick = function(){
// 1,获取数据
// 获取姓名 对应input标签,value属性值
var oIptName = document.querySelector('[type="text"]').value;
// 获取年龄 对应input标签,value属性值
var oIptAge = document.querySelector('[type="number"]').value;
// 获取城市 对应select标签,value属性值
var oIptCity = document.querySelector('select').value;
// 获取性别的三个radio单元框标签,是一个伪数组
var oIptSex = document.querySelectorAll('[type="radio"]');
// 定义变量,存储获取数据结果
var oIptSexVal = 0;
// 循环3个radio单元框伪数组,item存储的就是radio单选框标签
oIptSex.forEach(function(item){
// 如果 radio单选框标签,checked属性值是 true,表示是被选中的标签
if(item.checked === true){
// 获取这个标签的value属性值
oIptSexVal = item.value;
}
})
// 建立对象,结构与arr中的对象结构一直
var obj = {
name:oIptName ,
age:oIptAge ,
sex:oIptSexVal ,
city: oIptCity,
}
// 将对象写入到数组中
arr.push(obj);
// 调用生成页面函数,也就会根据新的数组,渲染生成新的页面
// 同时函数中会调用,添加删除效果函数,也同时给新的删除标签,重新绑定删除效果
setTab();
}
// 定义生成table表格的函数
function setTab(){
var str = '';
arr.forEach(function(item , key){
str += '<tr>';
str += `<td>${key+1}</td>`;
for(var k in item){
str += `<td>${item[k]}</td>`;
}
// 拼接删除单元格
// 给删除标签,添加属性,属性值是当期这条数据对应的索引数值
// 自定义属性,随便你写什么都行,跟别任何内容都没有关系
str += `<td> <button index="${key}">删除</button> </td>`
str += '</tr>';
});
// 将生成页面的操作,定义在函数中
oTb.innerHTML = str;
// 生成页面之后,有了删除标签之后,执行给删除标签绑定事件的函数
// 给删除标签绑定事件
// 之后只要是重新调用渲染生成页面的setTab()函数
// 就会调用 给删除标签绑定事件函数
del();
}
// 给删除标签,添加事件,实现功能效果
function del(){
// 给删除button添加事件,循环遍历添加
// 1,获取标签对象
// 获取 tbody中的botton 按钮,与新增button不冲突
// 获取结果是所有删除button标签的伪数组
var oBtns = document.querySelectorAll('tbody button');
// 2,循环遍历伪数组,item中存储的是就是 删除标签对象
oBtns.forEach(function(item){
// 给删除标签,添加点击事件
item.onclick = function(){
// 1,获取删除标签上,自定义属性的属性值
var index = item.getAttribute('index');
// 2,根据属性值,也就是需要 删除数组单元的索引,进制删除数组的操作
// 从这个索引开始,删除一个单元
arr.splice(index , 1);
// 3,删除之后生成了新的数组单元
// 根据新的数据单元,生成页面
// 同时也会重新 调用给删除标签绑定事件的函数本身
setTab();
}
})
}
总结:思路
-
定义全局作用域变量
tbody标签对象 数组arr 新增button按钮 -
调用生成table表格函数,生成页面;
setTab(); -
给新增button按钮,添加事件
标签.onclick = funciton(){}
获取数据,姓名,年龄,性别,城市
将四个数据,生成对象,对象的解构与arr数组中的对象,结构一致
将生成的对象,新增写入到arr数组中
根据新的数组,再重新渲染,生成table表格
调用生成table表格的函数 setTab() -
定义生成table表格函数 setTab函数
定义变量,赋值空字符串,存储拼接生成的字符串内容
循环遍历数组arr 第一个参数存储数据单元的数值,也就是对象,第二个参数存储数据单元对应的索下标
拼接 tr 起始标签
拼接 序号单元格 内容是 数据单元,也就是对象对应的索引下标,第二个参数+1
循环遍历 对象 也就是第一个参数存储的数据单元的数值
对象,只能使用for…in循环 自定义变量存储的是对象的属性
拼接 内容单元格 内容是 对象属性存储的属性值 也就是 item[自定义变量]
拼接 删除单元格 内容是 button按钮
给button按钮,添加自定义属性,属性名称是任意名称都行
属性值是 对象对应的索引下标 也就是循环arr时 forEach() 的第二个参数
拼接 tr结束标签
将字符串写入到tbody标签中
调用 给 删除标签,添加事件函数
de()
说明:因为我们给删除标签添加事件,必须要和渲染生成页面一起执行
每次渲染生成页面,都要给button标签,添加删除事件,因此,这两个操作,必须要绑定执行
我们把这两个操作,都写在渲染生成页面的函数中 -
定义函数,给button标签,添加删除效果 del函数
获取所有需要添加事件的button按钮,是一个数组
forEach()循环遍历这个数组 , 第一个参数,就是button按钮标签
获取button标签,自定义属性的属性值
按照属性值,执行删除数组单元的操作
arr.splice(属性值 , 1)
根据新的数组,渲染生成新的table表格
再次调用生成table表格函数 setTab();
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
