看图！我想在文本里输入内容，然后点击搜索，就会显示出下面表格的内容，求一段JS代码
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=ut...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{border-collapse:collapse;margin-top:50px;}
td{padding:5px;text-align:center;border:1px solid #333;}
p{width:500px;margin:60px auto 0 auto;}
.price{width:60px;}
</style>
</head>
<body>
<p>请输入要搜索的书名：<input type="text" id="name" style="width:200px;" />
<input type="button" id="btn" value="搜索" />
</p>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="tab">
<tr>
<td>书名</td>
</tr>
<tr>
<td>javascript基础教程</td>
</tr>
<tr>
<td>javascript高级教程</td>
</tr>
<tr>
<td>css基础教程</td>
</tr>
<tr>
<td>PHP指南</td>
</tr>
<tr>
<td>html5开发宝典</td>
</tr>
<tr>
<td>html+css教程</td>
</tr>
</table>
</body>
</html>
上面是表格HTML 只求JS代码，新手求大神帮忙
比如我输入PHP就会匹配下面的内容显示出来！ 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{border-collapse:collapse;margin-top:50px;}
td{padding:5px;text-align:center;border:1px solid #333;}
p{width:500px;margin:60px auto 0 auto;}
.price{width:60px;}
</style>
</head>
<body>
<p>请输入要搜索的书名：<input type="text" id="name" style="width:200px;" />
<input type="button" id="btn" value="搜索" />
</p>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="tab">
<tr>
<td>书名</td>
</tr>
<tr>
<td>javascript基础教程</td>
</tr>
<tr>
<td>javascript高级教程</td>
</tr>
<tr>
<td>css基础教程</td>
</tr>
<tr>
<td>PHP指南</td>
</tr>
<tr>
<td>html5开发宝典</td>
</tr>
<tr>
<td>html+css教程</td>
</tr>
</table>
</body>
</html>
上面是表格HTML 只求JS代码，新手求大神帮忙
比如我输入PHP就会匹配下面的内容显示出来！ 展开
1个回答
展开全部
你这个效果得用异步交互实现:
可以选择jquery的ajax
下面显示的结果由php页面查找然后返回给当前页面然后再做显示.
不知道你懂了没..
如果不懂给你讲仔细讲下吧
1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src='jquery.1.9.1.min.js'></script><!--下载的jquery文件-->
<style type="text/css">
table{border-collapse:collapse;margin-top:50px;}
td{padding:5px;text-align:center;border:1px solid #333;}
p{width:500px;margin:60px auto 0 auto;}
.price{width:60px;}
</style>
</head>
<body>
<p>请输入要搜索的书名：<input type="text" id="name" style="width:200px;" />
<input type="button" id="btn" value="搜索" />
</p>
<table id='result'>
</table>
<script>
$("#btn").click(function(){
var name=$.trim($("#name").val());
if(name=='')
{
alert("请输入书名");return false;
}
$.ajax({
'url':'1.php',
'dataType':'text',
'data':{name:name},
'type':'post',
'success':function(res){
$("#result").html(res)
},
'error':function(){alert("交互失败")}
})
})
</script>
</body>
</html>
1.php
<?php
$name=$_POST['name'];
/*数据库查找
然后根据查找出来的数据
循环成类似
<tr>
<td>书名</td>
</tr>
<tr>
<td>书名</td>
</tr>
这样的*/
//比如最后的结果是$data;
die($data);
?>
更多追问追答
追问
可以把PHP里的循环代码写完整么- - 数据库名您随便起个就成。。。。还有内个post不用在table里传过去吗？
追答
<?php
$name=$_POST['name'];
$link = mysql_connect('localhost','root','') or die(mysql_error());//数据库连接
mysql_select_db('bookForm');//选择数据库
mysql_query("set names 'utf8'");//定义编码
$sql = "select * from book where name LIKE ' %".$name."%'";
$result = mysql_query($sql);
$res ="";
while($row = mysql_fetch_array($result)) {
$res.= "<tr><td>".$row['name']."</td></tr>";
}
if($res=='')
{
die("抱歉,未查到相关记录");
}
die($res);
?>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
