Question

I have this table where i get the data from my db. what i want to do is get the data from tr of each td and pass it on an ajax request to be passed to another page.

while($row = mysqli_fetch_array($result, MYSQLI_BOTH))
                    {
                        echo '<tr>';
                            echo '<td id="t_name">' .$row['name']. '<input type="hidden" id="sell_id" value='.$row['id'].'> <input type="hidden" id="t_id" value='.$row['telco_id'].' > </td>';
                            echo '<td id="keyword_name">' .$row['keyword']. ' <input type="hidden" id="keyword_id" value='.$row['keyword_id'].' > </td>';
                            echo '<td id="main_cross">' .$row['main_message']. '</td>';
                            echo '<td id="alternate_cross">' .$row['alternate_message']. '</td>';
                            echo '<td id="start_date">' .$row['start_timestamp'].' </td>';
                            echo '<td id="end_date">' .$row['end_timestamp'].' </td>';
                            echo '<td> <a href="javascript:void(0);" id="editCrossSell"> <i class="menu-icon icon-edit" style="color:black;"></i></a> <a href="javascript:void(0);"> <i class="menu-icon icon-trash" style="color:black;"> </i> </a> </td>';
                        echo '</tr>';
                        $count++;
                    }

Here is the Jquery that i have created. But the problem here is that i only get one tr and when i click another row it is not passing. kindly help me with this. thanks

$('#editCrossSell').click(function() {

    var t_name = $('#t_name').text();
    var keyword_name = $('#keyword_name').text();
    var t_id = $('#tid').val();
    var keyword_id = $('#keyword_id').val();
    var cross_id = $('#sell_id').val();
    var main_sell = $('#main_cross').text();
    var alteernate_sell = $('#alternate_cross').text();
    var start_date = $('#start_date').text();
    var end_date = $('#end_date').text();
    $.ajax({
        type: "POST",
        url: "editCrossSell.php",
        async: true,
        data: {t_Name : t_name, keyName : keyword_name, t_Id : t_id, keyId : keyword_id, main_cross : main_sell, alternate_cross : alteernate_sell,
            startDate : start_date, endDate : end_date, action : "update", cross_sell_id: cross_id},
        success: function(data)
        {
            $('#module').html(data);
            $('#moduleSearch').hide();
        },
        beforeSend: function() 
        {
            $('#loader').show();
        },
        complete: function() 
        {
            $('#loader').hide();
        }
    });
});

Answer 1

$('.editCrossSell').click(function() {// change id to class
    var tablerow = $(this).closest('tr');
    var t_name = tablerow.find('.t_name').text();//change to class
    var keyword_name = tablerow.find('.keyword_name').text();//change to class
    var t_id = tablerow.find('.tid').val();//change to class
    var keyword_id = tablerow.find('.keyword_id').val();//change to class
    var cross_id = tablerow.find('.sell_id').val();//change to class
    var main_sell = tablerow.find('.main_cross').text();//change to class
    var alteernate_sell = tablerow.find('.alternate_cross').text();//change to class
    var start_date = tablerow.find('.#start_date').text();//change to class
    var end_date = tablerow.find('.end_date').text();//change to class
    $.ajax({
        type: "POST",
        url: "editCrossSell.php",
        async: true,
        data: {
            t_Name: t_name,
            keyName: keyword_name,
            t_Id: t_id,
            keyId: keyword_id,
            main_cross: main_sell,
            alternate_cross: alteernate_sell,
            startDate: start_date,
            endDate: end_date,
            action: "update",
            cross_sell_id: cross_id
        },
        success: function(data) {
            $('#module').html(data);
            $('#moduleSearch').hide();
        },
        beforeSend: function() {
            $('#loader').show();
        },
        complete: function() {
            $('#loader').hide();
        }
    });
});

Try this way. I hope i understood you correctly

Answer 2

Change id="editCrossSell" to class="editCrossSell" and $('#editCrossSell') to $('.editCrossSell')

or

add an index to each editCrossSell ID like editCrossSell1, editCrossSell2, etc (by defining an index in your loop and incrementing by one on each loop)

Answer 3

First, if multiples tds are being generated, then you should opt for class attribute as shown below.

echo '<tr>';
echo '<td class="t_name">' .$row['name']. '<input type="hidden" id="sell_id" value='.$row['id'].'> <input type="hidden" id="t_id" value='.$row['telco_id'].' > </td>';
echo '<td class="keyword_name">' .$row['keyword']. ' <input type="hidden" id="keyword_id" value='.$row['keyword_id'].' > </td>';
echo '<td class="main_cross">' .$row['main_message']. '</td>';
echo '<td class="alternate_cross">' .$row['alternate_message']. '</td>';
echo '<td class="start_date">' .$row['start_timestamp'].' </td>';
echo '<td class="end_date">' .$row['end_timestamp'].' </td>';
echo '<td> <a href="javascript:void(0);" id="editCrossSell"> <i class="menu-icon icon-edit" style="color:black;"></i></a> <a href="javascript:void(0);"> <i class="menu-icon icon-trash" style="color:black;"> </i> </a> </td>';
echo '</tr>';

Then, go for each() on those trs

$('#editCrossSell').click(function() {
    $("tr").each(function(i,v){
    var t_name = $(this).find(".t_name").text();
    var keyword_name = $(this).find(".keyword_name").text();
    var t_id =$(this).find(".t_id").val();
    var keyword_id =$(this).find(".keyword_id").val();
    var cross_id = $(this).find(".cross_id").val();
    var main_sell = $(this).find(".main_cross").text();
    var alteernate_sell = $(this).find(".alternate_cross").text();
    var start_date = $(this).find(".start_date").text();
    var end_date = $(this).find(".end_date").text();
    $.ajax({
        type: "POST",
        url: "editCrossSell.php",
        async: true,
        data: {t_Name : t_name, keyName : keyword_name, t_Id : t_id, keyId : keyword_id, main_cross : main_sell, alternate_cross : alteernate_sell,
            startDate : start_date, endDate : end_date, action : "update", cross_sell_id: cross_id},
        success: function(data)
        {
            $('#module').html(data);
            $('#moduleSearch').hide();
        },
        beforeSend: function() 
        {
            $('#loader').show();
        },
        complete: function() 
        {
            $('#loader').hide();
        }
    });
    });
});

Change your code accordingly.

get value of each tr to be passed in an ajax request

3 个答案: