Question

这是一个创建表的.php文件。

<table id="contact-messages">
<thead>
  <tr>
    <th>Username</th><th>Category</th><th>Message</th><th>Created at</th>
  </tr>
</thead>
<tbody>
<?php
foreach ($contact_messages as $message) {
    echo '<tr>'
         . '<td>' . htmlentities($message['username']) . '</td>'
         . '<td>' . htmlentities(ucfirst($message['category'])) . '</td>'
         . '<td>' . nl2br(htmlentities($message['message'])) . '</td>'
         . '<td class="created-at" data-created_at="' . htmlentities($message['created_at']) . '"></td>'
       . '</tr>';
}
?>
</tbody>
</table>

这是该页面的.js文件。此代码更改了表的内容。

$.get("contact-messages.php", {  "category": category }, function (data) {

    $("#contact-messages").find("tbody").empty();   // Empty the old messages.

    for (var i = 0; i < data.length; i++) {
        $("#contact-messages").find("tbody")
        .append(($("<tr/>")
            .append($("<td/>", { text: ((data[i].username === null) ? '' : data[i].username) }))
            .append($("<td/>", { text: data[i].category }))
            .append($("<td/>", { text: data[i].message }))
            .append($("<td/>", {
                text: data[i].created_at,
                class: 'created-at',
                'data-created_at': data[i].created_at

            }))
        ));
    }
}, 'json');

因此，每次我想要更改表的结构时，我都必须更改.php和.js文件。现在，问题是，有没有办法将表的结构存储在一个文件中，每次我想要更改结构，我只是更改该文件？

Answer 1

在php页面中创建所有html并使用$ .ajax请求调用此php页面，最后使用适当的方法$（＆＃34; #contact-messages＆＃34;）来使用来自ajax请求的响应.html（reponse） / $（＆＃34; #contact-messages＆＃34;）。append（response）/ $（＆＃34; #contact-messages＆＃34;）。prepend（response）。

Answer 2

你只能使用ajax作为 @jQuery愤怒的小鸟，如果你打电话给 .append（）或者你应该注意它会更好。 html（）只需一次且不在循环中（减少执行时间一点点）

$.get("contact-messages.php", {  "category": category }, function (data) {

$("#contact-messages").find("tbody").empty();   // Empty the old messages.

var tmpStr  = '';  

for (var i = 0; i < data.length; i++) {
    tmpStr = '';
    tmpStr+='<tr>';
    tmpStr+='<td>'+(data[i].username === null) ? '' : data[i].username)+'<td/>';
    tmpStr+='<td>'+data[i].category+'</td>'
    tmpStr+='<td>'+data[i].message+'<td>'
    tmpStr+='<td class="+created-at+" data-created_at="++">'+data[i].created_at+'</td>'
    tmpStr+='</tr>';        
}
//call .html()  once instead of .append()  data.length*5  times 

 $("#contact-messages").find("tbody").html(tmpStr);

}, 'json');

查看php和javascript文件 - MVC

2 个答案: