リロードのみクリックした場合

Question

私はHTMLテーブル<tr>と<td>のSQLテーブルにアイテムを掲載しています。このテーブルは、30秒ごとにjQuery AJAXでリフレッシュされるdiv内にあります（そのため、divには一意のIDがあります）。この部分はうまく動作します。ここではHTMLは次のとおりです。

function auto_load() 
 
{ 
 
    $.ajax({ 
 
     url: "/folder/content.php", 
 
     cache: false, 
 
     success: function(data){ 
 
      $("#live").html(data); 
 
     } 
 
    }); 
 
} 
 

 
$(document).ready(function(){ 
 
    auto_load(); //Call auto_load() function when DOM is Ready 
 
}); 
 
setInterval(auto_load,30000);

<div id="live"> 
 
    <table> 
 
     <thead> 
 
      <tr> 
 
       <th>Id</th> 
 
       <th>Name</th> 
 
      </tr> 
 
     </thead> 
 
\t  <tr> 
 
    \t  <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <!-- and so on --> 
 
    </table> 
 
</div>

今、私はしかし、クリッカブルのそれぞれを作成されて何をしたいのか

ので、それをクリックすると、 1）GET要求はPHPに送信されていることどのファイルがクリックされたかを示すファイル。 2）ページ全体ではなく、その特定の（またはその中身の）コンテンツのみが更新されます。

通常のhttpリンクではできません。これをクリックすると、ページ全体が再読み込みされます。

これは私の知識が不足しているため、多分誰かがこの問題を解決する方法について私にいくつかのアイデアを教えてくれるかもしれません。ありがとう！

Answer 1

あなたが正確に何を望んでいるかはわかりませんが、あなたが行をロードしたいと思っていれば分かりますか？そのため、行のクリックをリッスンし、セルを読み込み、Ajax呼び出しを行い、コンテンツを置き換えたいとします。

$("#live").on("click", "tbody tr", function() { //listen for click on a table row 
    var tr = $(this), //the row 
     tds = tr.find("td"), //the cells of the row 
     id = tds[0].text(), //the first column text 
     output = tds[1]; //where to output 

    $.ajax({ 
     method: "POST", 
     url: "some.php", //where to post the data 
     data: { id: id } //value to pass to the server 
    }) 
    .done(function(result) { 
     output.html(result); //output the returned value 
    }) 
    .fail(function() { 
     alert("error"); 
    }); 
}); 

それは権利ではなく、あなただけのdivを取得するには、ツリーをルックアップする必要があるよりも、あなたは、テーブル全体をロードする場合。

$(document).on("click", "tr", function() { 
    var div = $(this).closest("div"); 
    console.log(div.attr("id")); 
    div.load("foo.php?id=" + div.attr("id")); 
}); 

Answer 2

$('#myTable').on('click', '.someClass',function() { 
 
     var trID=$(this).attr('id'); 
 
     $(this).find('td').append(new Date());//replace this with your AJAX call 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
     <tr id="x" class="someClass"><td>Click Me 1</td></tr> 
 
     <tr id="y" class="someClass"><td>Click Me 2</td></tr> 
 
    <table>