单击链接后，表中的Javascript链接保持选中

Question

我有一张表格，每行都有链接，链接是javascript链接，单击后执行AJAX查询。 我希望所选链接的行在单击链接时保持突出显示。

如果单击该行，那么我当前的代码将使该行突出显示，但如果单击该行中的链接，则不会使该行突出显示。

<table class="table table-hover unpadded" id="mashed_tab">
    <tbody class="mashed_body">
        <?php
            foreach($linked as $link)
            {
                echo '<tr class="mashed_row">';
                echo '</td>';
                echo '<td class="linked-title dark unpadded"><div class="cell_link">';
                echo '<a href="javascript:;" id="linksplode" link_id="'.$link['linkid'].'">'.$link['keywords'].'</a></div></td>';
                echo '<td class="small-cell"><i class="fa fa-arrow-right"></i></td>';
                echo '</tr>';
            }
        ?>
    </tbody>
</table>

tr.mashed_row i.fa-arrow-right {
    display:none;
}
tr.mashed_row:hover i.fa-arrow-right {
    display:block;
}

.mashed_body tr.selected {
    background-color: #ecf0f1;
}


<script type="text/javascript">
    $("tbody tr").click(function() {
        console.log('clicked');
        $(this).addClass('selected').siblings().removeClass("selected");
    });

用于处理链接的脚本：

        <script type="text/javascript">
        $('.mashed_row a').click(function () {
            var link_id = $(this).attr('link_id');

         $.ajax({
                  type: 'POST',
                   url: '<?php echo base_url(); ?>main/explode_link',
                   data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', link_id},
                   dataType: 'json',
                   success : function(data) {
                       if(data){
                           var len = data.length;
                           var txt = "";
                           if(len > 0){
                               for(var i=0;i<len;i++){
                                   if(data[i].title){
txt += "<tr><td class='linked-title dark unpadded'>"+data[i].title+"</td><td class='text-left'><span id='article_source' class='label label-primary'>"+data[i].name+"</span></td></tr>";
                                       }
                                    }
                               }
                               if(txt != ""){
                                   $("#xarticletab").html("");
                                   $("#xarticletab").append(txt).removeClass("hidden");
                               }
                           }
                       }
                   }
            });
            return false;
        });
    </script>

Answer 1

下面提到的代码为我工作。 希望这也对您的情况有所帮助。

在表的一行中获取超链接类型元素，然后向其中添加类，以突出显示背景。 如果需要，还可以删除先前选择的行。

参考：Java脚本是添加类并删除元素的类：

http://www.w3schools.com/jquery/html_addclass.asp http://www.w3schools.com/jquery/html_removeclass.asp

使用Jquery选择器搜索元素：

https://learn.jquery.com/using-jquery-core/selecting-elements/

我的代码：Js：

  $(document).ready(function() {
     attachEvents();
  });

  function attachEvents() {

    $('table tr a').click(function() {
    $(this).parent().parent().siblings().removeClass('highlightBackground');
    $(this).parent().parent().addClass('highlightBackground') ; 

   }); 
}; 

HTML：

<style>

.highlightBackground
{
  background-color : red; 
}

</style>


<table>
<th> LinkColumn</th>
<th>&nbsp;&nbsp;&nbsp; </th>
<th>Non Link Column</th>

<tr>
    <td style="text-align: center">
        <a href="#">Click</a>
    </td>
    <td></td>
    <td style="text-align: center"> Row1 </td>
</tr>
<tr>
    <td style="text-align: center">
        <a href="#">Click</a>
    </td>
    <td></td>
    <td style="text-align: center"> Row2 </td>
</tr>
</table>

Answer 2

尝试$（“ a”）。click（$（this.parent（））。addClass（'selected'）。sibilings（）。removeClass（“ selected”）;

希望这对您有帮助