留言和删除留言案例&&动态表格生成案例----分享

留言和删除留言案例&&动态表格生成案例----分享

文章目录

  • 留言和删除留言案例&&动态表格生成案例----分享
    • 评论留言和删除留言案例
      • **评论留言 核心思路**
    • 动态表格生成案例
      • **核心算法**

评论留言和删除留言案例

评论留言 核心思路

1,点击按钮之后,就动态创建一个li,添加到ul里面。

2,创建 li 的同时,把文本域里面的值通过 li.innerHtml 赋值给 li 。

3,如果想要新的留言后面显示就用appendChild 如果想要留言在前面显示就用insertBefore。

删除评论 核心思路

1,当我们把文本域里面的值赋值给 li 的时候, 多添加一个删除的链接

2,需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的 li

3,组织链接跳转需要添加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张图片

动态表格生成案例

核心算法

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>

留言和删除留言案例&&动态表格生成案例----分享_第2张图片

你可能感兴趣的:(实际开发应用,案例,代码手写,javascript,html5)