Finding next TR and changing content

#1

Im trying to find the next table row using THIS and once found I want to change the content of that row.
This is what I have so far…but its not working:

   $(this).closest('tr').next('tr').innerText = '<td colspan="8" id="feedback-msg">This Submission is being 
   reviewed</td>';
#2

I think you should be using innerHTML instead of innerText. Other than that not sure… you might want to post the relevant HTML to give us a better clue, and tell us what node is ‘this’ refereing to.

Now that I recall jQuery has an html method to set the html of an element. Probably use that.
Cheers

#3

I’d also opt for innerHTML… If that doesn’t work, then we need somу more details…

#4

One potential issue that I notice is that he’s using innerText, which doesn’t work because it’s a jQuery object being worked on, which would require the text() method to be used instead.

Another issue is that if the code is running on the form submit, that there is then no easy access to the button that triggered the submit event.

Perhaps we can approach this from another direction.

With the following table:

<table border="1">
<tbody>
    <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td>
        <td>5</td><td>6</td><td>Submit for review</td><td><input type="submit"></td>
    </tr>
    <tr></tr>
</tbody>
</table>

Are there other ways that we can recommend to change row 2 from having no data cells, to one large data cell with the “This Submission is being reviewed” message?

#5

By activating on the click event of the submit button, this lets us get an easy reference to the button that was clicked.

$("[type=submit]").on("click", function (evt) {
    evt.preventDefault();
    const $nextTr = $(this).closest('tr').next('tr');
    $nextTr.html('<td colspan="8" id="feedback-msg">This Submission is being reviewed</td>');
});

You can see an example of this at https://jsfiddle.net/pmw57/4czasgq7/5/

2 Likes