Beginner Beginner - 1 month ago 9
Javascript Question

How to change value in previous TD via Javascript

I have a button when clicked on runs a function and I want the value in the previous TD to change to yes from no.

HTML:

<tr class="odd">
<td class="">13.00</td>
<td class="">DDR</td>
<td class="">No</td>
<td class="">
<div class="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="javascript:paid(4);return false" href="#" "="" role="button" aria-disabled="false">
<span class="ui-button-text">Paid</span>
</div>
</td>
</tr>


So when the user clicks on "Paid" this is called.. Javascript:

function paid(iD) {
$.ajax({
contentType: "application/json; charset=utf-8",
type: "POST",
url: "Paid",
dataType: "json",
data: "{ id:" + iD +"}",
success: function (id) {
//Here change value of previous TD to yes;

},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
};


Is there a way I can access the html of the previous td and change the value of it?

O and also make the button disappear?

Answer

This is one way that will work. But with these kind of things you need to be careful about changing your html after:

$("span.ui-button-text").click(function(){
    var td = $(this).closest("td").prev();
    //do ajax here
});

this will allow you to store the correct td cell and then you can reference that inside your success callback. For example:

td.html("Yes");