使用每个函数在表格中显示数据时遇到问题

Question

我知道这是一个愚蠢的问题，对于我在 Javascript 和一般编程方面的知识有限，我深表歉意。

我有一个搜索，它获取您输入的值，然后使用它来搜索数据库并返回表中的数据。因此，如果我搜索香蕉，它将在表格中显示香蕉和它的值，如脂肪、纤维等，为每次搜索创建新行。现在，我遇到的问题是，如果我最终搜索 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();
    }
});


   });

Answer 1

尝试在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);
}); 
}
}