0

このようなテーブルがあります

<table>
<thead>
      <tr>
           <td>col_1</td><td>col_2</td><td>col_3</td>
      </tr>
</thead>

<tbody id="content">
      <tr>
           <td>cell_1_1</td><td>cell_1_2</td><td>cell_1_3</td>
      </tr>
</tbody>
</table>
<button id="ref" value="Refresh" />

<tbody>ajaxを使ったコンテンツだけを読み込みたい。これが私のスクリプトです

$("ref").click(function(){
$.post("ajax.php",
function(data)
{
    $("#content").html(data)    
})
});

そしてajax.phpファイルはこのようなものです

echo ' <tr>
           <td>cell_1_1</td><td>cell_1_2</td><td>cell_1_3</td>
       </tr>';

しかし、ロードすると、ロードされたデータはテーブル「tr」および「td」としてのスタイルを失います。私はそれが間違っていることを知っており、完全な「テーブル」としてロードすると機能します。しかし、別々にロードするためのアイデアはありますか<tbody>???

4

1 に答える 1

1

$.ajaxはるかにカスタマイズ可能であるため、これを使用することを強くお勧めします。

$("ref").click(function(){
    $.ajax({
        url:'ajax.php', // URL of where AJAX should POST the data
        type: 'POST', // Send a POST to server
        data: {'id': 3243}, // Data to be POSTED to server. In PHP use echo $_POST['id']; to see what the AJAX passed in
        dataType: 'HTML', // Expected data from server
        success: function(data){
            console.log(data); // <-- view what the server sent back to AJAX
            // OR
            alert(data);  // <-- view what the server sent back to AJAX

            $("#content").html(data);
        }
    });
});

編集：

私はまだ AJAX を使用することをお勧めしますが、コメントを読んだ後、質問があります。

このように初期ロード後にテーブルをフォーマットするために jQuery を使用していますか?

$('table tbody tr td').css({'padding':'10px'});

はいの場合は、次のように繰り返す必要があるためです$("#content").html(data);。

$("#content").html(data);
$('table tbody tr td').css({'padding':'10px'});

これは、.css()スタイル要素がインライン レベルであるため、HTML() を更新すると<td>スタイルが失われるためです。更新時にスタイルが失われないように、CSS ファイルでスタイルを宣言する必要があります。

于 2013-10-21T15:27:40.927 に答える