Jquery: How to set some value for current TD

Question

I have a html table with few columns and rows. in each row there is a button in a TD. when button will be clicked then i want to set some text into current or closest td of button.

This way i tried but nothing happening when button clicked.

$('#tblAppointments').on('click', '#btnbook', function () {

$(this).closest('td').html('Booked');

$(this).parent.html('Booked');

});

Table HTML

<table id="tblAppointments" class="table table-striped">
<thead class="thead-dark">
<tr>
    <th scope="col">Doctor Name</th>
    <th scope="col">Available Date</th>
    <th scope="col">Available Time</th>
    <th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="hdndocid" value="1" type="hidden">
<input id="hdnpatientemail" value="popy@gmail.com" type="hidden">Dr Debasis Saha</td>
<td>27/05/2018</td>
<td>10:10 A.M.</td>
<td><button id="btnbook" type="button" class="btn btn-info">Book Now</button></td>
</tbody>
</table>

This code is not working. I want to remove button from td and set some text like Booked. what is mistake in my code.

EDIT

See how i am doing full code

$('#tblAppointments').on('click', '.btnbook', function () {
    var rowid = $(this).closest('tr').find("input[id*='hdndocid']").val();
    var email = $(this).closest('tr').find("input[id*='hdnpatientemail']").val();
    //$(this).closest('td').html('Booked');

    var baseurl = '@ConfigurationManager.AppSettings["baseAddress"]' + 'api/Appointments/BookAppointment';
    //alert(baseurl);
    $.ajax({
        url: baseurl,
        type: 'POST',
        dataType: 'json',
        contentType: "application/json",
        data: JSON.stringify({ email: email, rowid: rowid }),
        success: function (data, textStatus, xhr) {
            if(data=='SUCCESS');
            {
                $(this).closest('td').html('Booked');
                return false;

            }
        },
        error: function (xhr, textStatus, errorThrown) {
            var err = eval("(" + xhr.responseText + ")");
            alert('Error ' + err.Message);
            console.log(textStatus);
        }

    }).done(function () {

    });
});

if i write these line at top of button click then it is working

                    $(this).closest('td').html('Booked');
                    return false;

but when i put this line inside jquery ajax success then it is not working

 success: function (data, textStatus, xhr) {
                        if(data=='SUCCESS');
                        {
                            $(this).closest('td').html('Booked');
                            return false;

                        }
                    },

Please suggest what to do as a result code should work inside success.

Answer 1

If the table has more than one row, having more than one element with the same id is invalid html, and you should use a class selector instead:

<td>
    <button type="button" class="btn btn-info btnbook">Book Now</button>
</td>

<script>
    $(function(){
        $('#tblAppointments').on('click', '.btnbook', function () {
            $(this).closest('td').text('Booked');
        });   
    });
</script>

(and $(this).parent.html('Booked'); if you do use it, should be $(this).parent().html('Booked'); but the .closest('td') will select the closest 'td' up the chain in any case so it is not needed, based on your html).

If you've referenced jQuery correctly, and you do not have another element with the id = tblAppointments, this should work.

Based on your updated code, put this code ahead of $.ajax:

var _this = $(this);

and change the success function to be:

_this.closest('td').html('Booked');