Jquery删除不在表行上工作的类

Question

I posted another question for issue and it was partially solved. I have a table with a single link on each row. The link calls AJAX and outputs in another Bootstrap column. This works fine. When I click the link, the class "highlight" is applied which changes the background color of the row. When I click another link I want the previously clicked clink to have the "highlight" class removed and the new row to have the class applied.

Currently, the add class works but any other link click get the class added but the class is never removed.

<table class="table table-hover unpadded" id="mashed_tab">
                    <thead>
                        <tr>
                            <th class="artcl_hdr text-center" colspan="2">
                                <p class="big_date top_pad"><i class="fa fa-rss fa-lg concrete"></i>&nbsp; Articles/Keywords for
                                2016-07-09 - 2016-07-10</p>
                            </th>
                            <th><span class="badge bkgcol-wet-asphalt">55</span></th>
                        </tr>
                    </thead>
                    <tbody class="mashed_body">
                        <tr class="mashed_row">
                            <td class="bkgcol-sunflower wht-border">
                                <div class="date_cell">
                                    <span class="asphalt long_date">Sat</span><span class="white day">Jul&nbsp;09,&nbsp;2016</span>
                                </div>
                            </td>
                            <td class="linked-title dark unpadded">
                                <div class="cell_link">
                                    <a href="javascript:;" id="linksplode" link_id="425">link 1</a>
                                </div>
                            </td>
                            <td class="small-cell">
                                <i class="fa fa-arrow-right"></i>
                            </td></tr><tr class="mashed_row">
                            <td class="bkgcol-sunflower wht-border">
                                <div class="date_cell">
                                    <span class="asphalt long_date">Sat</span>
                                    <span class="white day">Jul&nbsp;09,&nbsp;2016</span>
                                </div>
                            </td>
                            <td class="linked-title dark unpadded">
                                <div class="cell_link">
                                    <a href="javascript:;" id="linksplode" link_id="405">Link 2</a>
                                </div>
                            </td>
                            <td class="small-cell">
                                <i class="fa fa-arrow-right"></i>
                            </td>
                        </tr>
                        <tr class="mashed_row">
                            <td class="bkgcol-sunflower wht-border">
                                <div class="date_cell">
                                    <span class="asphalt long_date">Sat</span>
                                    <span class="white day">Jul&nbsp;09,&nbsp;2016</span>
                                </div>
                            </td>
                            <td class="linked-title dark unpadded">
                                <div class="cell_link">
                                    <a href="javascript:;" id="linksplode" link_id="426">Link 3</a>
                                </div>
                            </td>
                            <td class="small-cell">
                                <i class="fa fa-arrow-right"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>


        <script type="text/javascript">
        $(document).ready(function() {
            attachEvents();
         });

         function attachEvents() {
            var selClass = 'highlight';

           $('#mashed_tab tr a').click(function() {
           $(this).parent().parent().removeClass(selClass);
           $(this).parent().parent().addClass(selClass);
          }); 
         };
    </script>

Answer 1

Try something like this in your on click function and let me know.

$('tr a').click(function() { 

$("#mashed_tab tr").find("." + selClass).removeClass(selClass); 

$(this).parent().parent().addClass(selClass); });