Question

我的问题是，当我插入一个新数据时，它附加在<td>的同一<table>上，我想在新块中追加数据，以便数据/项目显示一个一个就像snapdeal ex： - http://www.snapdeal.com/。

抱歉我的英语不好。

显示posts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AdPortal</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>


    <div class="container">
        <div class="header">
            <div>

                <img class="logo" src="images/zuikr.png" alt="logo" />

            </div>
            <div class="post_ad">
                <ul class="header_nav">
                    <a href="http://localhost/adportal/login.html"><li class="header_nav_link">post a free ad</li></a>
                </ul>
            </div>

        </div>
        <div class="nav">
            <ul class="nav_link">
                <div class="nav_link_div"><a href="http://localhost/adportal/index.html"><li class="nav_link_list">HOME</li></a></div>
                <div class="nav_link_div"><a href="#"><li class="nav_link_list">CONTACT US</li></a></div>
                <div class="nav_link_div"><a href="#"><li class="nav_link_list">ABOUT</li></a></div>
            </ul>
        </div>
        <div class="display_posts">
            <img src="" alt="post" id="path" class="post_image">

            <table class="post_data">
                <tr >
                    <td colspan = "2">
                        <p style="text-align:center;font-weight:bold">Followings are the Details of This Ad</p></td></tr>

                        <tr><td>ID of Ad is</td><td  id="post_id"></td></tr>
                        <tr><td>Title of Ad is:</td><td  id="post_title"></td></tr>
                        <tr><td>Model of Ad is:</td><td  id="post_model"></td></tr>
                        <tr><td>Price of Ad is:</td><td  id="post_price"></td></tr>
                        <tr><td>Description about Ad is:</td><td  id="post_description"></td></tr>
                        <tr><td>Name:</td><td  id="post_name"></td></tr>
                        <tr><td>Your communicating email is:</td><td  id="post_email"></td></tr>
                        <tr><td>Contact Number:</td><td  id="post_phone"></td></tr>
                        <tr><td>city:</td><td  id="post_city"></td></tr>
                        <tr><td>Category of Your post is:</td><td  id="post_category"></td></tr>
                    </table>

                </div>

    </div>

    <footer>
        <p id="company_name"></p>
    </footer>

</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/company-name.js"></script>
<script src="js/display-posts.js"></script>
</body>
</html>

显示posts.js

$(document).ready(function() {
    $.ajax({
        url: 'php/display-posts.php',
        type: 'GET',


        success:function(data)
        {
            var result = $.parseJSON(data);

            $.each(result, function(key, value) {
                $.each(value, function(key, value) {
                    if (key === 'id') { $('#post_id').append(value); };
                    if (key === 'title') { $('#post_title').append(value); };
                    if (key === 'price') { $('#post_price').append(value); };
                    if (key === 'model') { $('#post_model').append(value); };
                    if (key === 'description') { $('#post_description').append(value); };
                    if (key === 'name') { $('#post_name').append(value); };
                    if (key === 'email') { $('#post_email').append(value); };
                    if (key === 'phone') { $('#post_phone').append(value); };
                    if (key === 'city') { $('#post_city').append(value); };
                    if (key === 'category') { $('#post_category').append(value); };
                    if (key === 'path') { $('#path').attr('src', value.slice(3) ) };
                });
            });

        }

    });
});

显示posts.php

<?php
session_start();

require_once 'database.php';


$category = $_SESSION['category'];      
$data  = array();
$query = $dbh->prepare("SELECT * FROM posts WHERE category = ?");
$query->execute(array($category));
$data = $query->fetchall(PDO::FETCH_ASSOC);

foreach ($query as $key => $value) {
    $data[$key] = $value;
}
$result = json_encode($data);
echo $result;

Answer 1

如果我正确理解你，我会改变你构建表格的方式。现在，您只有一个表，其中包含一组行，用于产品的不同属性。因此，当您定位每个命名单元格时，只有一个位置可以放置它，因此新价格（例如）将被添加到它看到post_price id的唯一位置。

您需要使用类而不是ID来为每个新对象创建一个新的html块。我不知道我会继续使用表格，也许只是一组div，每个产品一个。这样你可以为各个部分添加CSS，它们看起来都是统一的。建模的一种方法是生成一个新的块作为html字符串，然后将其附加到页面上您显示所有数据的任何位置。因此，在您的第一个循环中，不是循环遍历每个对象的所有属性，它可能看起来像：

new_product = "<div class='product'>";
new_product += "<p class='id'>" + value.id + "</p>";
....
....
new_product += "</div>";
$(".product_section").append(new_product);

希望这有帮助！如果您有任何疑问或需要澄清，或者我完全偏离基地，请随时告诉我。

如何使用jquery在html表中逐个附加数据

1 个答案: