[英]Having trouble with displaying data in table with each function
我知道这是一个愚蠢的问题,对于我在Java语言和编程方面的有限知识,我深表歉意。
我有一个搜索,该搜索获取您输入的值,然后使用它搜索数据库并返回表中的数据。 因此,如果我搜索香蕉,它将在表中显示香蕉及其值,例如脂肪,纤维等,为每次搜索创建新行。 现在,我遇到的问题是,如果我最终搜索3个项目,那么我将得到6行而不是3行,因为该表将填充所有先前的搜索。 这是处理此问题的代码的一部分:这是html文件的一部分
<script>
function funkcija(){
var value = $('a').text();
$('#hidden1').show();
$('#jedinice_butt').click(function(){
var odabrano = $("#dropdown option:selected").text();
var uneseno = $("#input_jedinica").val();
$('#tablica').show();
if(odabrano === "g"){
alert(value);
$.getJSON("nutritional_value.php?value=" + encodeURI(value), function (data) {
var ttr = $("<tr />");
$.each(data, function(k, v){
$("<td />").text(k=='name' ? v : v * (parseFloat(uneseno, 10) / 100)).appendTo(ttr);
});
$("#tejbl").append(ttr);
});
}
}
</script>
HTML的一部分:
<div id="search_result">
<a href="#"></a>
</div>
<div id="hidden1">
<form name="input" action="" method="get">
<input id="input_jedinica" type="text" name="namirnica">
<select id="dropdown">
<option value="kg">g</option>
<option value="dg">dg</option>
<option value="g">kg</option>
</select>
<button type="button" id="jedinice_butt">ok</button>
</form>
</div>
</div>
<div id="tablica">
<table id="tejbl">
<tr id="naslov">
<td><h3>NAME</h3></td>
<td><h3>FAT</h3></td>
<td><h3>FIBER</h3></td>
<td><h3>SUGARS</h3></td>
</tr>
</table>
</div>
那么,如何在每次搜索一项时不输出所有以前的搜索结果呢?
php用于第二次搜索,Nutritional_value.php:
<?php
include 'connect.php';
$value = $_GET['value'];
$query = mysql_query("SELECT NAME, FAT, FIBER, SUGARS FROM ccm WHERE NAME LIKE '$value%'");
while( $run = mysql_fetch_array($query)){
$results = array();
$results["name"]=$run['NAME'];
$results["fat"]=$run['FAT'];
$results["fiber"]=$run['FIBER'];
$results["sugars"]=$run['SUGARS'];
//Send it to the client in json format:
echo(json_encode($results));
}
?>
首次搜索的php文件:
<?php
include 'connect.php';
$value = $_POST['value'];
echo '<ul>';
$query = mysql_query("SELECT NAME FROM ccm WHERE NAME LIKE '$value%'");
while( $run = mysql_fetch_array($query)){
$name = $run['NAME'];
echo '<li onClick="funkcija();">'.$name.'</li>';
}
echo '</ul>';
?>
jQuery的第一个搜索:
$(document).ready(function(){
$('#search_button').click(function(){
var value = $('#search_box').val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value:value}, function(data){
$('#search_result a').html(data);
});
}
else{
$('#search_result').hide();
}
});
});
尝试在function funkcija()
更改此function funkcija()
:删除$('#jedinice_butt').click(function () {
并将其粘贴到$(document).ready(function () {
在顶部,然后添加funkcija()});
这样,您就有了$(document).ready(function () {funkcija()});
您似乎有一个);}
在funkcija
的底部丢失了。 复制和粘贴错误? 如果在您的实际代码中,则只需删除最后一个});
您的最终代码应为:
$(document).ready(function () {
$('#jedinice_butt').click(function () {funkcija()});
$('#search_button').click(function () {
var value = $('#search_box').val();
if (value != '') {
$('#search_result').show();
$.post('search.php', {
value: value
}, function (data) {
$('#search_result a').html(data);
});
} else {
$('#search_result').hide();
}
});
});
function funkcija(){
var value = $('a').text();
$('#hidden1').show();
var odabrano = $("#dropdown option:selected").text();
var uneseno = $("#input_jedinica").val();
$('#tablica').show();
if(odabrano === "g"){
alert(value);
$.getJSON("nutritional_value.php?value=" + encodeURI(value), function (data) {
var ttr = $("<tr />");
$.each(data, function(k, v){
$("<td />").text(k=='name' ? v : v * (parseFloat(uneseno, 10) / 100)).appendTo(ttr);
});
$("#tejbl").append(ttr);
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.