JavaScript练习之添加纪录

最新推荐文章于 2022-04-14 19:46:16 发布
最新推荐文章于 2022-04-14 19:46:16 发布
阅读量346 收藏
点赞数 1
分类专栏： JavaScript 文章标签： css html javascript JavaScript DOM Javascript事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/november_chopin/article/details/54986279
版权 
<!--
	作者：1377378268@qq.com
	时间：2017-02-11
	描述：输入信息然后把信息添加到表格中
-->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		
		<script type="text/javascript">
		
			function delA(){
				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;
				//获取要删除的员工的名字
				var name = tr.firstChild.innerHTML;
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除"+name+"吗?");
		
				//如果用户点击确认
				if(flag){
					//删除tr
					tr.parentNode.removeChild(tr);
				}
				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};
			
			window.onload = function(){
				//获取页面中所有的超链接
				var allA = document.getElementsByTagName("a");
				
				for(var i=0 ;i<allA.length ;i++){
					//为每一个超链接都绑定点击事件
					allA[i].onclick = delA;
				}
				
				
				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */
				var submitBut = document.getElementById("addEmpButton");
				submitBut.onclick = function(){
					//获取要添加的信息
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					
					//创建一个tr
					var tr = document.createElement("tr");
					
					//创建4个td
					var nameTd = document.createElement("td");
					var emailTd = document.createElement("td");
					var salaryTd = document.createElement("td");
					var aTd = document.createElement("td");
					
					//创建一个a元素
					var a = document.createElement("a");
					
					//创建四个文本节点
					var nameText = document.createTextNode(name);
					var emailText = document.createTextNode(email);
					var salaryText = document.createTextNode(salary);
					var delText = document.createTextNode("Delete");
					
					//把文本节点添加到td中
					nameTd.appendChild(nameText);emailTd.appendChild(emailText);
					salaryTd.appendChild(salaryText);

					//向a中添加文本
					a.appendChild(delText);
					//将a添加到td中
					aTd.appendChild(a);

					//将td添加到tr中
					tr.appendChild(nameTd);
					tr.appendChild(emailTd);
					tr.appendChild(salaryTd);
					tr.appendChild(aTd);
					
					//向a中添加href属性
					a.href = "javascript:;";

					//为新添加的a再绑定一次单击响应函数
					a.onclick = delA;
					
					//获取table
					
					var tab = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tabBody = tab.getElementsByTagName("tbody")[0];
					//将tr添加到表格中
					tabBody.appendChild(tr);
					
				};
				
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th> </th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>
	</div>
	</body>
</html>

css样式：
@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
	//overflow: auto;
}


th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}














                

        

        

    




    

      

        

            

              
                
                  jsfantasy
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
JavaScript的学习记录

				
			

			

				

					m0_60518344的博客
				

				

					09-13
					
					203
					
				

			

		

		

			
				
JavaScript由三部分组成：

1.ECMAScript，js的核心语法标准

2.DOM（文档对象模型）

描述处理网页内容的方法和接口，js操作html的api（api：封装的方法）

3.BOM（浏览器对象模型）

描述与浏览器进行交互的方法和接口，js操作浏览器的api

拓展：Ajax----XMLHttpRequest，用于在后台与服务器交换数据，基本特点：在不重新加载页面的情况下更新页面，局部刷新

JavaScript特点:

1.解释型语言，js->nodejs

2.弱类型语

			
		

	



                

              
                



	

		

			

				
					
ArcGIS之JavaScript添加线

					
最新发布

				
			

			

				

					03-25
				

			

		

		

			
				
ArcGIS之JavaScript添加线

			
		

	



                


  
              

                


	

		

			

				
					
javascript学习之添加记录

				
			

			

				

					Eluckburlkmotion的博客
				

				

					07-17
					
					150
					
				

			

		

		

			
				
//删除tr的响应函数
function delA(){
}
添加员工的功能：
点击按钮以后，员工的信息将会被添加到表格中
var addEmpButton.onclick=function(){
//获取用户填写的员工信息
//获取员工的name
var  name=document.getElementById("empName").value;
var  email=document.getElementById("email").value;
var  salary=document.getElem

			
		

	





	

		

			

				
					
JavaScript 添加删除记录

				
			

			

				

					丑小鸭
				

				

					08-05
					
					582
					
				

			

		

		

			
				
代码示例：

1 JS代码

1）声明myClick函数：

function myClick(id,fun){
           btn=document.getElementById(id);
           btn.onclick=fun;
       }

 2）添加：

 2.1 复杂版：

 myClick("btn",function(){
         //得到输入...

			
		

	



		

			
		



	

		

			

				
					
JS中的添加删除记录练习--添加（包含思路）

				
			

			

				

					Fantasc的博客
				

				

					08-06
					
					177
					
				

			

		

		

			
				
**
要求：在表格中输入员工信息，点击提交按钮将用户输入的员工信息添加到员工信息表格中。
思路：

因为要用到添加删除练习里面的代码，所以要结合着删除的功能代码一起看。
既然是要点击提交按钮，那第一步就会来获取到要点击的按钮，并为按钮绑定单击响应函数。
获取用户输入的员工的信息，因为是在input框中输入的，只要获取到input框中的内容就行，利用value属性来获取input框中的内容。
需要将用户的信息保存到表格的tr元素节点中，先通过createElement方法来创建一个tr元素，再创建四个td元素

			
		

	





	

		

			

				
					
JS基础-添加删除记录(复杂版)

				
			

			

				

					linqunbin的博客
				

				

					05-30
					
					255
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-U...

			
		

	





	

		

			

				
					
js动态添加表格记录

				
			

			

				

					qq_43679917的博客
				

				

					04-05
					
					134
					
				

			

		

		

			
				
html表格部分

js函数部分




			
		

	





	

		

			

				
					
ArcGIS之JavaScript添加点

				
			

			

				

					03-25
				

			

		

		

			
				
ArcGIS之JavaScript添加点

			
		

	





	

		

			

				
					
ArcGIS之JavaScript添加多边形

				
			

			

				

					03-25
				

			

		

		

			
				
ArcGIS之JavaScript添加多边形

			
		

	





	

		

			

				
					
javascript练习

				
			

			

				

					11-15
				

			

		

		

			
				
javascript练习

			
		

	





	

		

			

				
					
js实现添加删除记录

				
			

			

				

					m0_53679993的博客
				

				

					04-14
					
					198
					
				

			

		

		

			
				
在这里插入代码片
	 <table id="employeeTable">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>&nbsp;</th>
           .

			
		

	





	

		

			

				
					
js表格特效

				
			

			

				

					mischen520的博客
				

				

					07-07
					
					575
					
				

			

		

		

			
				
js表格特效





    
    Title
    
    
        function add(){
            var tbody=$("#tr1").parentNode;
            var userId=$("#userId").value;
            var userName=$("#userName").value;
  

			
		

	





	

		

			

				
					
js简单实现添加、删除记录

				
			

			

				

					dengfengling999的博客
				

				

					01-21
					
					1166
					
				

			

		

		

			
				
DOM增删改的方法：

appendChild（） 把新的节点添加到指定的节点。

向一个父节点中添加一个新的子节点

用法 ：父节点.appendChild（子节点）；

removeChild（） 删除子节点

 语法：父节点.removChild（子节点）

replaceChild（） 替换子节点

 使用指定的子节点替换已有的节点

 语法：父节点.replaceChilld（新节点，子节点）

insertBefore（） 将指定的子节点前面插入新的子节点

 在指定的子节点...

			
		

	





	

		

			

				
					
JavaScript 使用函数实现“历史记录”

				
			

			

				

					weixin_30696427的博客
				

				

					08-05
					
					227
					
				

			

		

		

			
				
函数可以使用对象去记住先前操作的结果，从而避免多余的运算。

比如我们现在测试一个费波纳茨算法，我们可以使用递归函数计算fibonacci数列，一个fibonacci数字是之前两个fibonacci数字之和，最前面的两个数字是0和1。代码如下：

var count = 0;    //记录函数调用次数
 var fibonacci = function(n) {
    ...

			
		

	





	

		

			

				
					
a标签的href="javascript:function()"

				
			

			

				

					透明大脑
				

				

					06-28
					
					4660
					
				

			

		

		

			
				
Document
  
 
 
  点我
  来吧
 


 
 function s(){
 
 var theVar=document.getElementsByTagName("a")[0].href; 
 alert(theVar);
alert(typeof(theVar));
return false;
 }
 function add(id){
 

			
		

	





	

		

			

				
					
添加javascript代码:_JavaScript（1）

				
			

			

				

					weixin_39716160的博客
				

				

					01-13
					
					176
					
				

			

		

		

			
				
一、JavaScript组成1.ECMAScript：是ECMA制定的脚本语言的语法标准，基础语法的规范，为了让不同的浏览器都可以运行通过标准运行出来的代码。2.文档对象模型(DOM)：JavaScript操作网页上的元素(标签)的API。3.浏览器对象模型(BOM)：JavaScript操作浏览器的部分功能的API。二、JavaScript书写格式1.CSS书写格式  1.行内样式: 写在标签内...

			
		

	





	

		

			

				
					
记录日常使用中JS的常用方法

				
			

			

				

					zhangfeng2124的专栏
				

				

					06-26
					
					217
					
				

			

		

		

			
				
字符串操作
replace利用正则，替换所有匹配的字符
var str = "替的换的所的有的字的符";
document.write(str.replace(new RegExp(/(的)/g),''));输出结果：替换所有字符。
待替换字符也可以是动态
var str = "替的换的所的有的字的符";
var replaceStr = "的";
document.write(str.r

			
		

	





	

		

			

				
					
JavaScript向div中添加数据，并删除的功能

				
			

			

				

					陌默
				

				

					01-30
					
					3261
					
				

			

		

		

			
				
Bom练习

function removeButM(){
var xx = document.getElementById("addM");
xx.remove();
}
function removeButY(){
var xx = document.getElementById("addY");
xx.remove();
}
function removeButS(){


			
		

	





	

		

			

				
					
javascript练习项目

				
			

			

				

					05-11
				

			

		

		

			
				
以下是适合练习 JavaScript 的一些项目：

1. ToDo List - 制作一个简单的待办事项列表，用户可以添加、删除、标记已完成和编辑任务。

2. 轮播图 - 制作一个可自动轮播的图片展示区域，用户可以手动切换图片。

3. 计算器 - 制作一个简单的计算器，用户可以进行加、减、乘、除运算。

4. 简易日历 - 制作一个简单的日历，用户可以查看当前日期以及选择其他日期。

5. 简易游戏 - 制作一个简单的游戏，比如猜数字或者石头剪刀布。

6. 图片拖拽 - 制作一个图片拖拽功能，让用户可以通过鼠标拖拽图片进行移动。

7. 模态框 - 制作一个模态框组件，让用户可以在页面上弹出一个对话框进行交互。

8. 瀑布流布局 - 制作一个瀑布流布局，让用户可以浏览大量图片或者文章时更加舒适。

9. Tab 页签 - 制作一个多个 Tab 页签切换功能，让用户可以在不同的内容之间进行切换。

10. 时钟 - 制作一个简单的时钟，让用户可以查看当前时间。

以上这些项目都可以通过 JavaScript 来实现，如果你还有其他的想法，也可以自行设计一些小项目进行练习。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值