Change <td> element value on change event

html, javascript, jquery

Solution

Try this:

$(document).ready(function() {
  $('#example table tbody tr td input').change(function() {
    var rowEdit = $(this).parents('tr');
    rowEdit.children('.sub').html('Success');
  })
})

Since you fetched the parent tr element, children() should do the trick.

Here is the jsFiddle

Problem

I have a table like this: ``` Column 1 | Column 2 ------------------- Textbox1 | Text1 Textbox2 | Text2 ``` I want to change the `Textbox1` value and when the cursor move out it will run the `change` events to replace the `Text1` value to `Success`. ``` <html> <head> <title>Demo - Change Value</title> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script> $(document).ready(function() { $('#example table tbody tr td input').change(function() { var rowEdit = $($(this).parents('tr').html()); rowEdit.closest('.sub').html('Success'); <!-- $('.sub').html('Change');--> }) }) </script> </head> <body> <div id="example"> <table> <thead> <th>Column 1</th> <th>Column 2</th> </thead> <tbody> <tr> <td><input type="text" /></td> <td class="sub">123</td> </tr> <tr> <td><input type="text" /></td> <td class="sub">456</td> </tr> </tbody> </table> </div> </body> </html> ``` The problem is, the value didn't change after I call the `rowEdit.closest('.sub').html('success');` but it will change the `Text1` and `Text2` if I use `$('.sub').html('Change');`. My goal is to change the text inside the Column 2 when I change the value of `input` of the column 1 with same row. How can I achieve that?

Original source