そのため、テーブルの1つからのデータの行を表示するデータベース結果ページがあります。ユーザーが特定の行をクリックすると、別のテーブルのそのFKに関連する追加データが、クリックされた行の下で、元のテーブルの次の行の上にデータの行として表示される機能を実装しようとしています。私が読んだものから、これに利用できるアニメーションはありません-それがちょうど正しい場所に表示される限り、私は幸せになります。次に、もう一度クリックして非表示にすることができます。
私はすでにonclick関数をコーディングしており、SQLでクエリされたデータとともにjsonデータを返しています。javascriptとjqueryの新人としてjqueryを使用してこの機能を実装する方法がわかりません。これが私の試みです：
$(document).ready(function() {
$('.target_url').hover(function() {
$(this).css('cursor', 'pointer');
});
$( ".target_url" ).click(function() {
var url = $(this).html();
$.ajax(
{
url: "post_results.php",
type: "POST",
data: { "blogger": url},
success: function( data) {
//console.log(data);
response = $.parseJSON(data);
$(function() {
$.each(response, function(i, item) {
var $tr = $(".target_url").append('<tr>' +
$('<td>').text(item.NAME),
$('<td>').text(item.POST_URL),
$('<td>').text(item.POST_DATE)
+ '</tr>'
);
});
});
},
error: function(xhr, status, error) {
console.log("not working");
},
dataType: 'text'
});
});
});
このコードは、クエリされたデータを元のテーブルの最初の列のすべてのフィールドに挿入します。明らかに、最初にクリックした行の下に、新しい個別のテーブル行として追加する必要があります。これは適切なセレクターを使用するのと同じくらい簡単なはずですが、jqueryを使用してかなり基本的なフォーム検証を行っただけです。
助けてくれて本当にありがたいです！ありがとう
このフィドルを使用すると役立つ場合があります。
JS：
var data =
[{ id: 1, NAME: 'abc', POST_URL: 'qwert', POST_DATE: '123', },
{ id: 2, NAME: 'xyz', POST_URL: 'poiuy', POST_DATE: '456' },
{ id: 3, NAME: 'pqr', POST_URL: 'vbnmj', POST_DATE: '123' }];
$('.target_url').click(function() {
var url = $(this).html();
$.each(data, function(i, item) {
var $tr=$('<tr></tr>');
$tr.append($('<td></td>',{text : item.NAME}));
$tr.append($('<td></td>',{text : item.POST_URL}));
$tr.append($('<td></td>',{text : item.POST_DATE}));
$('.target_url').find('tbody').append($tr);
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加