Home/ Questions/Q 8451315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T11:12:21+00:00

I have a table like this: Column 1 | Column 2 ——————- Textbox1 |

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0