Passing a <tr> id to jQuery

Question

I'm still learning jQuery and I ran into a problem. I have a table with 50+ rows. Each is labeled with an id.

<tr id="51">

This id is the database id and I need to pass it to jQuery and submit it along with an AJAX request.

        $($location).click(function () {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('select').length > 0)
                return;

            $currentSelection.html('');

            $('<select id="selectLocation" onChange="locationSubmit()"/>')
                .attr('name', 'location')
                .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
                .appendTo(this);
        });

locationSubmit()

function locationSubmit(){
            var $selectLocation = $('#selectLocation').val();
            var $selectId = $(this).val('tr#id'); //stuck here
            alert($selectId);
            $.ajax({ 
                url: '/ajax/training-update.php',
                data: {
                        action: $selectLocation,
                        courseid: $selectId
                    },
                type: 'POST',
                success: function(output) {
                    alert(output);
                    }
            });
        }

the alert in locationSubmit() is returning [object Object]. How do I pass the value of tr#id to locationSubmit() and send it via AJAX?

EDIT - HTML

<tr id="51">
    <td><a href="/link/goes/here.php?course_id=5&id=51">course name</a></td>
    <td>
        <span class="rowStartDate" id="rowStartDate151">09/10/12</span> - 
        <span class="rowEndDate" id="rowEndDate151">09/14/12</span>
    </td>
    <td class="location">Location 2</td>
    <td class="status">open</td>
</tr>

Answer 1

So, there is any good answer?

Test this:

$($location).click(function () {
        var $currentSelection = $(this);

        // if there is already an input-field in this TD, return...
        if($currentSelection.find('select').length > 0)
            return;

        $currentSelection.html('');

        $('<select id="selectLocation"/>')
            .attr('name', 'location')
            .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
            .appendTo(this);
    });

and replace your function with this:

$('body').delegate('#selectLocation', 'change', function(){

        var $selectLocation = $(this).val(); //Edited here also
        var $selectId = $(this).closest('tr').attr('id'); //edited here
        alert($selectId);
//The AJAX here        
});

And as you see, your function is gone and replaced by the delegate, which seemed to work great! The .delegate() is a very good function that is working all the time, even if elements are created after the DOM is ready. It's listening all the time

Edited Check the second code part.

Answer 2

 var $selectId = $('#selectLocation').parent("tr").attr("id")

But not to good practice to have ids only in numbers.

AND !!

You are creating multiple ids. Can be defined just one per document.

use:

$($location).on("click" ...

to use dynamic objects

change:

$('<select class="selectLocation"

then

$(".selectLocation").change(function()
{
   var $selectLocation = $(this).val();
   var $selectId = $(this).parent("tr").attr('id'); 
   alert($selectId);

        $.ajax({ 
            url: '/ajax/training-update.php',
            data: {
                    action: $selectLocation,
                    courseid: $selectId
                },
            type: 'POST',
            success: function(output) {
                alert(output);
                }
        });


}