问题描述
:cry: :cry: 小弟比较菜，最近在学习javascript。但是遇到了一些问题不知道如何解答，求大神们看看！！！！在html中输入输入姓名，email，电话等这样基本的信息，然后点提交后会在下面显示出刚才的输入结果，然后后面有按钮可以选择删除掉这条信息。有一个查找按钮，文本框里输入要查找的信息，如果找到直接显示出来，如果没有alert提示查找失败。这些在一个页面上实现就行。谢谢了！！！！！ :cry: :cry: :cry:
解决方案
<%@ 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:" " ; row.cells[1].innerHTML = sex.length>0?sex:" "; row.cells[2].innerHTML = age.length>0?age:" "; row.cells[3].innerHTML = telephone.length>0?telephone:" "; 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"> <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之类的
解决方案二：
可以用ajax来处理