CODEWITHSUNDEEP
javascriptjqueryhtmljsp
Prasanna
Prasanna

Reputation: 2661

Highlighting a dynamically created row

I have a table where a row gets added every time I press a "Add" button. I have an "Edit" button which is placed in the first cell of the newly created row.

I want to highlight the row that is being edited. I know that I can get the current <tr> element like

var par = $(this).parent().parent();

But when I use, 

par.css('border-color', 'red');

It does not change the color. What mistake am I making and how should I highlight that particular row?

Upvotes: 0

Views: 224

Answers (2)

Dan Grahn
Dan Grahn

Reputation: 9424

This is really about the styling of the <tr>. CSS doesn't like to style <tr>'s because they really only exist for semantics. In order to add a border to one, you need to make it display: block;.

Here is a jsFiddle and example code.

HTML

<table>
    <tbody>
        <tr><td>Some Content</td></tr>
        <tr><td>Some Content</td></tr>
        <tr>
            <td>
                <a href="#" class="edit">Edit</a>
            </td>
        </tr>
        <tr><td>Some Content</td></tr>
        <tr><td>Some Content</td></tr>
    </tbody>
</table>

Javascript

$(".edit").click(function(e) {
    $(this).closest('tr').toggleClass('editting');
    e.preventDefault();
});

CSS

table tr {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0);
}

.editting {
    background: #FAA;
    border: 1px solid red;
}

Please note how I used an rgba color to make the border opaque. There are other ways to do this, but if you leave the border off it causes the table to "jitter."

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

Assuming this refers to an element within the tr, then it will be better to use .closest() here

var par = $(this).closest('tr')

Upvotes: 1

Related Questions