Question

我在HTML表格<tr>和<td>中列出了SQL中的项目。该表位于div中，每隔30秒使用jQuery AJAX刷新一次（这就是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>
	    <tr>
    	    <td></td>
            <td></td>
        </tr>
        <!-- and so on -->
    </table>
</div>

现在我要做的是制作每个可点击的，但如果单击它， 1）将GET请求发送到PHP文件，指示单击了哪个特定内容; 2）并且只在那之后刷新那个特定的（或其中的内容），而不是整个页面。

我无法使用常规http链接，因为如果单击a，则会重新加载整个页面。

由于这是我的知识很短的地方，也许有人可以分享一些关于如何解决这个问题的想法。谢谢！

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>

如果单击则仅重新加载TR

2 个答案: