Beginner Beginner - 10 months ago 61
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 Source

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");