学生信息管理

数据渲染

一.说到渲染，必定会有 静态模板结构 和数据的参与

意味着，以后实现渲染业务之前，先

1.准备好静态结构

2.获取到数据，现在是模拟，后期是ajax

二：渲染的具体实现：遍历 + 拼接，生成html结构，赋值给指定的元素

	  // 2.获取元素
      let tbody = document.querySelector('tbody')

      // 3.实现数据的渲染
      let htmlStr = ''
      for (let i = 0; i < arr.length; i++) {
        htmlStr += `<tr>
                      <td>${i + 1}</td>
                      <td>${arr[i].uname}</td>
                      <td>${arr[i].age}</td>
                      <td>${arr[i].gender}</td>
                      <td>${arr[i].salary}</td>
                      <td>${arr[i].city}</td>
                      <td>
                        <a href="javascript:" class="del">删除</a>
                      </td>
                    </tr>`
      }
      tbody.innerHTML = htmlStr

使用forEach进行遍历

// 3.实现数据的渲染
let htmlStr = ''

// forEach方法的使用：它可以从头到尾遍历数组(如果只要遍历其中一些，不要使用它)，要求传入一个回调函数
// 回调函数有两个参数：
// value:代表当前遍历到的数组的元素
// index:当前元素所对应的索引
// 数组.forEach(function(value,index){操作})

// 如果遍历的是数据，那么参数一般名称为  value|v   index|i
// 如果遍历的是元素伪数组，那么参数一般名称为 ele/element

// value:当前遍历到的元素  --数组中的一个一个的元素
// index:遍历到的元素所对应的索引
arr.forEach(function(value, index) {
    htmlStr += `<tr>
                    <td>${index + 1}</td>
                    <td>${value.uname}</td>
                    <td>${value.age}</td>
                    <td>${value.gender}</td>
                    <td>${value.salary}</td>
                    <td>${value.city}</td>
                    <td>
                    <a href="javascript:" class="del">删除</a>
                    </td>
				</tr>`
})

tbody.innerHTML = htmlStr

数据新增

核心业务就是实现数据的添加

1.收集好用户数据

2.将数据添加到指定的结构(将数据添加到数组arr中),所以我们收集的数据，最终应该是一个对象

3.让页面中呈现效果：出现刚刚新增的记录

第一种方式

根据数据创建元素，设置内容并追加到指定的结构

// 4.实现数据的新增
add.addEventListener('click', function() {
    // 4.1.收集数据，生成一个对象
    let newObj = {
        stuId: 1004,
        uname: '欧阳霸天123',
        age: 19,
        gender: '男',
        salary: '40000',
        city: '广州'
    }
    // 4.2.将数据添加到数组
    // arr.push(newObj)

    // 4.3 让页面中呈现效果
    // 之前： 创建一个元素 ，设置内容，追加到页面结构中
    let newTr = document.createElement('tr')
    newTr.innerHTML = `<td>1</td>
                        <td>${newObj.uname}</td>
                        <td>${newObj.age}</td>
                        <td>${newObj.gender}</td>
                        <td>${newObj.salary}</td>
                        <td>${newObj.city}</td>
                        <td>
                        <a href="javascript:" class="del">删除</a>
                        </td>`
    tbody.appendChild(newTr)
})

上述方式的问题

1.页面刷新之后，之前添加的数据会消失，我们需要将数据进行存储，后期根据存储的数据实现数据的渲染

2.如果你是使用  创建经并追加  ，移除元素  这种方式来实现页面交互操作，那么就会造成后期在项目中数据渲染出现异常
	1.有可能这个页面会有很多条记录
	2.有可能造成这个页面没有填满

新增要基于数据

收集用户数据，生成一个对象

将对象添加到数据源数组--ajax

重新渲染

// 新增用户时的需要的dom元素
let uname = document.querySelector('.uname')
let age = document.querySelector('.age')
let gender = document.querySelector('.gender')
let salary = document.querySelector('.salary')
let city = document.querySelector('.city')
      
      
// 4.实现数据的新增
add.addEventListener('click', function() {
    // 获取数据源数组中的最后一个元素的stuId + 1,如果没有数据，索引为1001
    let id = arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001

    // 4.1.收集数据，生成一个对象
    let newObj = {
        // id你准备如何生成:获取数据源数组中的最后一个元素的stiId + 1
        stuId: id,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
    }

    // 4.2.将数据添加到数组，以后是发起ajax请求，将数据存储到服务器
    arr.push(newObj)

    // 4.3 让页面中呈现效果--重新渲染--修改数据源，根据数据源重新渲染
    init()
})

数据删除

一：操作一定要基于数据

1.删除数据源数组中的数据

2.重新渲染

二：动态生成的元素的事件绑定需要使用事件委托

委托方式绑定事件

// 5.实现数据的删除：事件委托
// 事件委托：将事件绑定给 父元素
tbody.addEventListener('click', function(e) {
    // 判断用户当前单击的是不是删除按钮
    if (e.target.className == 'del') {
        arr.splice(索引,1)
    }
})

实现删除功能

当你实现一个业务需要某些数据的时候，如果自己没有这个数据，一般有两种处理方式
1.传递参数
2.先存储再获取

修改模板结构，存储数据索引

<td>
    <a href="javascript:" class="del" id='${index}'>删除</a>
</td>

实现数据的删除

获取元素中的索引
删除数组中的数据 -- ajax

重新渲染

// 5.实现数据的删除：事件委托
// 事件委托：将事件绑定给 父元素
tbody.addEventListener('click', function(e) {
    // 判断用户当前单击的是不是删除按钮
    if (e.target.className == 'del') {
        // 获取当前删除元素所对应s的数据索引
        let index = e.target.id
        // 将数据源数组中的数据进行删除
        // 删除元素需要 索引下标，所以：
        // 我要什么：给我一个当前你想要删除的数据的索引
        // 我有什么: 我有一个e,准确的说是我有e.target
        arr.splice(index, 1)

        // 重新渲染
        init()
    }
})