仅在单击第5行元素或第3行元素中的文本框超出焦点时，才使用JQuery突出显示表行

Question

I have a table where rows can be highlighted once a row is clicked or a textbox is left.

My table is called "editTable" and the body of the table looks like this (rows are dynamically generated in a foreach loop so there can be more than one):

<tbody>
    <tr>
        <td>
           blabla
        </td>
        <td>
            blabla
        </td>
        <td>
           <input type="submit" id="item_Unitprice" />
       </td>
       <td id="total"></td>
       <td id="highlighter">
           <img src="~/Content/images/highlight.gif" /></td>
    </tr>
</tbody>

And the table highlighting works as follows:

// Highlighting table
$('#editTable').on('click focusout', 'tbody tr', function (event) {
    $(this).toggleClass('highlight');
});

This works, but now I want the table highlighting only to respond to a click on the 5th td-element in the rows (ie the highlight image) or when leaving the textbox in the 3th td-element for each row.

Is this possible and if so, how?

Answer 1

如何将$('#editTable')更改$('#editTable').eq(4)

Answer 2

Alright I found a solution by doing the following things:

(1) for highlighting on focusout I still use the old function:

// Highlighting table on focusout
$('#editTable').on('focusout', 'tbody tr', function (event) {
    $(this).toggleClass('highlight');
});

(2) for highlighting on a click I add a onclick event to the image like this:

<img src="~/Content/images/highlight.gif" onclick="highlight(this)" /> 

and add the following code to my JavaScript file (based on this question for deleting a row after a click):

function highlight(o) {
    var p = o.parentNode.parentNode;
    $(p).toggleClass('highlight');
}

This makes it work. Of course it would be prettier to combine the two into one but for now I am happy with the functionality.