JQuery的。 為表中的每一行發送ajax查詢

Question

我找到了許多有關我的問題的答案，但問題仍未解決

我有數據表，例如：

<table>
    <tr>
        <td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a id="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a id="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a id="bar"   href="#"> Data 4 </a> </td>
    </tr>
    <tr>
        <td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a id="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a id="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a id="bar"   href="#"> Data 4 </a> </td>
    </tr>
</table>

我需要：

對於此表中的每一行，獲取當前行中具有id =“ query”和id =“ foo”的鏈接的值，並發送ajax查詢

我嘗試這樣做：

    $("#detect_rel").click(function(){
        $('tr').each(function() {
            // ajax to: ajax.php?query=xxxx&data=&xxxxx
        });
    });

但是我無法獲取當前行的<a id="query"...和<a id="foo"...內部文本

我嘗試過這樣的事情：

$('tr').each(function() {
    var cols = $('.1, .2', this);
    // do something with cols
});

但這無濟於事，因為對於當前行，我不能（mb不夠的js知識）無法獲得<a id="query"...和<a id="foo"...內部文本

偽代碼：

排行

 get value of link in column_one and column_two send ajax query 

獲取下一行

等等

注意： <a href...在每個單元格，'bootstrap x editable'都需要，並且因為它，我需要在每個鏈接上使用id

---

問題已解決，謝謝大家

Answer 1

在HTML ID中，ID必須唯一，而類可以在頁面中多次出現。 要執行您的要求，您的HTML應該如下所示：

<table>
    <tr>
        <td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a class="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a class="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a class="bar"   href="#"> Data 4 </a> </td>
    </tr>
    <tr>
        <td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a class="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a class="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a class="bar"   href="#"> Data 4 </a> </td>
    </tr>
</table>

而且您的jQuery代碼應該執行以下操作：

$('#detect_rel').click(function() {
    $('tr').each(function(i, el) {
        var query = $(el).children('td').children('.query').text();
        var text = $(el).children('td').children('.text').text();
        //$.ajax (do your AJAX call here using values of query and text
    });
});

我剛剛在JSFiddle上測試了此代碼，並且可以正常工作。

演示： http ： //jsfiddle.net/Pt2Vd/