怎么编写javascript查询和删除按钮或者事件的操作啊！！！

0 0

怎么编写javascript查询和删除按钮或者事件的操作啊！！！5

:cry: :cry: 小弟比较菜，最近在学习javascript。但是遇到了一些问题不知道如何解答，求大神们看看！！！！在html中输入输入姓名，email，电话等这样基本的信息，然后点提交后会在下面显示出刚才的输入结果，然后后面有按钮可以选择删除掉这条信息。有一个查找按钮，文本框里输入要查找的信息，如果找到直接显示出来，如果没有alert提示查找失败。这些在一个页面上实现就行。谢谢了！！！！！ :cry: :cry: :cry:

JavaScript DOM 查询删除

2012年6月14日 12:38

wwcljs
1
0 0 2

查看图片附件

2个答案按时间排序按投票排序

0 0

采纳的答案

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
  <head>
  	<title>javascript的增删改查</title>
  	<script language="javascript">
  		 /**
		 * 删除字符串左右两端的空格
		 */
		 String.prototype.trim= function()
		  {
		     return this.replace(/(^\s*)|(\s*$)/g, "");  
		  }
		  
		  /**
		  * 提交信息
		  */
          function submitValue(){
          	var trId=Math.random();   //产生一个随机数作为这一行的id
          	var table = document.getElementById("displayText");
          	var name = document.getElementById("name").value.trim();
          	var sex = document.getElementById("sex").value.trim();
          	var age = document.getElementById("age").value.trim();
          	var telephone = document.getElementById("telephone").value.trim();
          	row = table.insertRow();   //增加行
          	for(i=0;i<5;i++){               
          		cell = row.insertCell();
          	}
          	row.id=trId;   //将随机数赋给行id
          	row.cells[0].innerHTML = name.length>0?name:"&nbsp;" ;
          	row.cells[1].innerHTML = sex.length>0?sex:"&nbsp;";
          	row.cells[2].innerHTML = age.length>0?age:"&nbsp;";
          	row.cells[3].innerHTML = telephone.length>0?telephone:"&nbsp;";
          	row.cells[4].innerHTML = "<button onclick='delText(\""+trId+"\");'>删除</button>";
          	reset();     //重置输入框（自定义寒暑）
          } 
          
          /**
		  * 重置name等输入框信息
		  */
          function reset(){
          	document.getElementById("name").value="";
          	document.getElementById("sex").value="";
          	document.getElementById("age").value="";
          	document.getElementById("telephone").value="";
          }
          
          /**
		  * 删除信息   根据行id删除行
		  */
          function delText(trId){
          	var table = document.getElementById("displayText");
          	for(i=0;i<table.rows.length;i++){
          		if(table.rows[i].id==trId){
          			table.deleteRow(i); 
          		}
          	}          	
          }
          
          /**
		  * 查询信息 
		  */
          function checkValue(){
          	var table = document.getElementById("displayText");
          	var check = document.getElementById("check").value.trim();
          	//将每行第一列数据和查询信息比较，不同的将这一行隐藏
          	for(i=1;i<table.rows.length;i++){
          		if(check.length==0){    //如果没有输入查询信息，显示所有行
          			table.rows[i].style.display="block";
          		}else if(table.rows[i].cells[0].innerText!=check){
          			table.rows[i].style.display="none";
          		}else{
          			table.rows[i].style.display="block";
          		}
          	}
          }
  	</script>
  </head>
  <body>
  	  <h3>javascript</h3> <br>
	  姓名：<input type="text" id="name">
	  性别：<input type="text" id="sex">
	  年龄：<input type="text" id="age">
	  电话：<input type="text" id="telephone">
	  <button onclick="submitValue()">提交</button><hr />
	  查询姓名：<input type="text" id="check"> &nbsp;&nbsp; <button onclick="checkValue()">查询</button><br /><br /> 
	  <table id="displayText" border="2" cellspacing="0" cellpadding="0">
	  	<tr>
	  	<td width="150" height="20">姓名</td>
	  	<td width="150" height="20">性别</td>
	  	<td width="150" height="20">年龄</td>
	  	<td width="150" height="20">电话</td>
	  	<td width="150" height="20">操作</td>
	  	</tr>
	  </table>
  </body>
</html>

将第一行第二行删掉，可以保存成html，这个是纯js写出来的，如果要用ajax的话，得涉及后台，servlet之类的

2012年6月19日 18:09