CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Ali
Ali

Reputation: 632

change content of next td by using jquery

I have a table that in each row of that there is a combobox in a td tag, I want when combobox changed then content of next td changes

I wrote this code but it does not work:

    $(document).ready(function () {
    $('#table tr td').find('.combobox').change(function () {
        var myvar=$(this).val();
        $.post("./data.php", {
                    p_array : myvar,
                    }, function(data) {
                        $(this).parent().next('td').html(data);
                });
    });
});

table structure:

<table>
   <tr>
      <td>
         <select class="combobox">
            <option>
                  select something
            </option>
         </select>
      <td>
      <td>must be changed</td>
  <tr>
</table>

what is the problem?

Upvotes: 0

Views: 654

Answers (2)

Ralf D&#39;hooge
Ralf D&#39;hooge

Reputation: 262

When you use this you'll better cache it in a variable like Flash said. Because this has another meaning, when it is in another scope. Also you could better use closest with the element, so you're sure you have the next td refered.

$(document).ready(function () {
    $('#table tr td').find('.combobox').change(function () {
        //cache it as soon as possible for performance reasons and readability
        var $this =$(this);
        var myVar = $this.val();
        $.post("./data.php", {
                    p_array : myvar,
                    }, function(data) {
                        $this.closest('td').next('td').html(data);
                });
    });
});

Upvotes: 1

Flash Thunder
Flash Thunder

Reputation: 12036

this in post is other thing than this before post... the simplest solution would be:

$(document).ready(function () {
    $('#table tr td').find('.combobox').change(function () {
        var myvar=$(this).val();
        var xthis = this;
        $.post("./data.php", {
                    p_array : myvar,
                    }, function(data) {
                        $(xthis).parent().next('td').html(data);
                });
    });
});

Upvotes: 1

Related Questions