使用带有PHP输出的jQuery动态添加行

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (141)

我正在使用jQuery从PHP文件中获取数据,我希望它在表中动态显示。还有另一种方法可以做到这一点,以便jQuery本身创建表行吗?这是我的尝试..

部分来自html文件:

<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>


<tr>
<td id="table_0"></td>
<td id="table_1"></td>
<td id="table_2"></td>
<td id="table_3"></td>
</tr>

</table>

部分来自js文件:

$('#jedinice_butt').click(function(){
var odabrano = $("#dropdown option:selected").text();

var uneseno = $("#input_jedinica").val();
$('#tablica').show();
//$('#add_button').show();


if(odabrano === "g"){ 
    $.post('name.php', {
        value: value
    }, function (data) {

      $('#table_0').html(data);
    });


    $.post('nutritional_value.php', {
        value: value
    }, function (data) {

      $('#table_1').append( data * (parseFloat(uneseno,10)/100));
    });

    $.post('fiber.php', {
        value: value
    }, function (data) {

        $('#table_2').append(data * (parseFloat(uneseno,10)/100) );
    });

    $.post('sugars.php', {
        value: value
    }, function (data) {

        $('#table_3').append( data * (parseFloat(uneseno,10)/100) );

    });



}

我试图解决的问题是,一旦我再次单击该按钮,它只会添加相同的值,我希望它添加到一个新行..所以基本上如何为这些输出动态添加行我尝试了一些没有成功的方法我事件尝试没有html文件中的's,所以它是从jQuery生成的,但我显然做错了。

提问于
用户回答回答于

为此,您可以修改DOM。

首先摆脱了

<tr>
<td id="table_0"></td>
<td id="table_1"></td>
<td id="table_2"></td>
<td id="table_3"></td>
</tr>

您可以动态地向文档添加元素。你可以这样做:

if(odabrano === "g"){ 

$.getJSON("SCRIPT_URL.php?value="+encodeURI(VALUE_VARIABLE),function(data){

    var ttr = document.createElement("tr");
    var dt = ["fat","fiber","sugar"];
    var ttd = document.createElement("td");
    ttd.innerText=data["name"];
    ttr.appendChild(ttd);
    for(var i=0,l=dt.length;i<l;i++){
        var ttd = document.createElement("td");
        ttd.innerText = data[dt[i]] * (parseFloat(uneseno,10)/100);
        ttr.appendChild(ttd);
    }
    $("#tejbl").append(ttr);

});

}

php脚本的注释:发送如下数据:

$results = array();
$results["name"]=$NAME_YOU_JUST_GOT_FROM_SOMEWHERE;
$results["fat"]=$FAT_YOU_JUST_GOT_FROM_SOMEWHERE;
$results["fiber"]=$FIBER_YOU_JUST_GOT_FROM_SOMEWHERE;
$results["sugar"]=$SUGAR_YOU_JUST_GOT_FROM_SOMEWHERE;
//Send it to the client in json format:
echo(json_encode($results));

扫码关注云+社区

领取腾讯云代金券