留言和删除留言案例动态表格生成案例----分享
留言和删除留言案例&&动态表格生成案例----分享
文章目录
- 留言和删除留言案例&&动态表格生成案例----分享
- 评论留言和删除留言案例
- **评论留言 核心思路**
- 动态表格生成案例
- **核心算法**
评论留言和删除留言案例
评论留言 核心思路
1，点击按钮之后，就动态创建一个li，添加到ul里面。2，创建 li 的同时，把文本域里面的值通过 li.innerHtml 赋值给 li 。3，如果想要新的留言后面显示就用appendChild 如果想要留言在前面显示就用insertBefore。
删除评论 核心思路
1，当我们把文本域里面的值赋值给 li 的时候， 多添加一个删除的链接2，需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的 li3，组织链接跳转需要添加javascript.void（0); 或者 javascript:;
案例代码如下，纯个人手敲：
<style type="text/css">.main{width: 800px;height: 100%;border: 1px solid purple;margin: 0 auto;background-color: hotpink;}textarea{width: 600px;height: 300px;resize: none;background-color: plum;}button{width: 70px;height: 30px;background-color: lightpink; border-radius: 10px;outline: none;}li a{float: right;margin-right: 300px;}style>head><body><div class="main"><textarea class="box" cols="30" rows="10">textarea><button>留言button><ul>ul>div><script type="text/javascript">---获取需要的标签---var pro = document.querySelector('.box');var but = document.querySelector('button');var ul = document.querySelector('ul');---给按钮注册点击时间---but.onclick = function() {if (pro.value == '') {alert('你没有输入内容')} else{var li = document.createElement('li'); ---创建li的标签--li.innerHTML = pro.value + "删除"; ---给li添加内容a标签 设置a不能跳转页面---ul.insertBefore(li,ul.children[0]); ---在ul中插入li标签---var as = document.querySelectorAll('a'); ---获取所有a标签---for (var i = 0; i < as.length; i++) { ---给所有a标签注册点击时间---as[i].onclick = function() {ul.removeChild(this.parentNode); ---将a标签所在的li标签删除---}}}}script>
动态表格生成案例
核心算法
1，因为表格里的学生数据都是动态的，我们需要 js 动态生成。 这里我们模拟数据，自己定义好数据。数据我们爱去对象形式存储。2，所有的数据都是放到tbody里面。3，因为行很多，我们需要循环创建多个行。4，每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）5，最后一列单元格是删除，需要单独创建单元格。
案例实现：
<style type="text/css">*{margin: 0;padding: 0;}table{margin: 200px auto;border-collapse: collapse;}th,td{width: 80px;height: 30px;border: 1px solid black;background-color: gainsboro;text-align: center;line-height: 30px;}style>head><body><table><thead><tr><th>姓名th><th>年龄th><th>分数th><th>操作th>tr>thead><tbody>tbody>table><script type="text/javascript">var arr = [{name:'鸣人',age:'21',score:'10'},{name:'佐助',age:'22',score:'99'},{name:'小李',age:'19',score:'80'},{name:'宁次',age:'23',score:'87'}]var bodys = document.querySelector('tbody'); ---在tbody 里面创建行：通过数组的长度 创建行for(var i = 0; i < arr.length; i++) { ---控制行数---var tr = document.createElement('tr'); ---创建行并在tbody中添加---bodys.appendChild(tr); for (var k in arr[i]) { ---控制列数---var td = document.createElement('td');tr.appendChild(td); ---创建单元格 并给单元给数据 td单元格数量取决于每个对象的属性个数---td.innerHTML = arr[i][k]; ---把对象里面的属性值给td---}var td = document.createElement('td'); ----创建用来删除的单元格---td.innerHTML = '删除';tr.appendChild(td)}var as = document.querySelectorAll('a'); ---删除操作---for (var i = 0; i < as.length; i++) {as[i].onclick = function() {bodys.removeChild(this.parentNode.parentNode); ---删除a所在行的父亲的父亲---}}script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！