reload only TR если щелкнуть

Question

Я перечисляю элементы из SQL в таблице HTML <tr> и <td>. Таблица находится внутри div, который обновляется с помощью jQuery AJAX за каждые 30 секунд (поэтому у div есть уникальный идентификатор). Эта часть работает нормально. Вот 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>