表中的 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>