I have found many answers about my problem, but problem not resolved

I have table, with data, example:

<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>

I need:

For each row in this table, get values of links with id="query" and id="foo" in current row and send ajax query

I try to do this:

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

But i cant get inner text of <a id="query"... and <a id="foo"... both, for current row

I tried something like this:

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

But it doens't help, because i cant (mb not enough js knowledges) get inner text of <a id="query"... and <a id="foo"... both, for current row

Pseudocode:

get row

get value of link in column_one and column_two

send ajax query

get next row

etc

NOTE: <a href... at each cell, needed for 'bootstrap x editable', and cuz of it, i need use id at each link

PROBLEM RESOLVED, thanks guys

I have found many answers about my problem, but problem not resolved

I have table, with data, example:

<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>

I need:

For each row in this table, get values of links with id="query" and id="foo" in current row and send ajax query

I try to do this:

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

But i cant get inner text of <a id="query"... and <a id="foo"... both, for current row

I tried something like this:

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

But it doens't help, because i cant (mb not enough js knowledges) get inner text of <a id="query"... and <a id="foo"... both, for current row

Pseudocode:

get row

get value of link in column_one and column_two

send ajax query

get next row

etc

NOTE: <a href... at each cell, needed for 'bootstrap x editable', and cuz of it, i need use id at each link

PROBLEM RESOLVED, thanks guys

• javascript
• jquery
• ajax

• Be aware that your HTML is invalid; IDs are meant to be unique across the entire page. Consider converting them to classes instead. – Adrian Wragg Commented Jul 9, 2013 at 23:40
• Yeah, i know, its cuz of "bootstrap x editable", he use "id" as "name" of element, like <input type="text" name="name" Sorry, i can't explain it more correctly, cuz of my bad engl :D But u can look "bootstrap x editable" documentation for understanding, why i do like this – Виктор Новиков Commented Jul 9, 2013 at 23:49

1 Answer 1

In HTML ID's must be unique whereas classes can occur multiple times in the page. To do what you ask, your HTML should look like this:

<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>

And your jQuery code should do something like this:

$('#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
    });
});

I tested this code on JSFiddle just now and it works.

Demo: http://jsfiddle/Pt2Vd/