ReeseB ReeseB - 5 months ago 13
jQuery Question

Javascript link in table stay selected on link click

I have a table with links on each row, the links are javascript link and perform an AJAX query when clicked. I want the row for the selected link to stay highlighted when the link is clicked.

My current code will keep the row highlighted if the row is clicked but not if the link in the row is clicked.

<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 for processing link:

<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

Below mentioned code worked for me. Hope this helps your case also.

Get the hyperlink type elements in a row of your table and add class to it which will highlight the background. Also remove the previous selected rows if that is your requirement.

Reference : Add a class and removing a class to an element is java script :

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

Searching elements using Jquery selector :

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

My Code : 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>
Comments