CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
John
John

Reputation: 145

how to show bootstrap edit and delete button appearing on hover over the table row

I have a twitter bootstrap table with a button group in the last cell of each row. I want these buttons appear only when user hovers over the row. and need click both edit and delete icons separately.

I have following scripts html

<div class="nesting">

  <a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
  <div class="nestchild">
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
    </div>    
      </div>

css

.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }

javascripts

$(document).ready(function(){
    $('.nesting a').hover(function(){  
        $(this).children('span.pencil').css({'display' : 'inline-block'});
    },function(){  
        $(this).children('span.pencil').css({'display' : 'none'});
    });
});

see this demo

https://jsfiddle.net/lilan2/a82jzucc/

how can I develop this properly

Upvotes: 1

Views: 8783

Answers (3)

Nitheesh
Nitheesh

Reputation: 19986

There is no need of a jQuery script for your case. You can do it simply with css.

Just add a :hover style in css

function editItem() {
      alert("Edit icon clicked");
  }
.foo-class {
    float: left;
    padding: 3px;
    width: 300px;
    min-width: 300px;
}

.nesting span.pencil {
    float: right;
}

.nestchild a {
    clear: both;
    display: block;
}

.nesting {
    background-color: #ccc;
    width: 300px;
}

.nesting a {
    width: 285px;
}

a.nesting-item .pencil {
    display: none;
}

a.nesting-item:hover .pencil {
    display: block;
}

.nestchild {
    margin-left: 15px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nesting">

    <a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
    <div class="nestchild">
        <a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil" onclick="editItem()"></span></a>
        <a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil" onclick="editItem()"></span></a>
    </div>
</div>

Upvotes: 0

aveyd
aveyd

Reputation: 21

Instead you can use jquery to update edit and delete buttons in table row on mouse over show edit delete buttons

$(document).ready(function() {
  // show buttons on tr mouseover
  $(".hover tr").live("mouseenter", function() {
    $(this).find("td:last-child").html('<a href="javascript:void(0);" onClick="editrow(' + $(this).attr("id") + ')">Edit</a>&nbsp;&nbsp;<a href="javascript:void(0);" onClick="deleterow(' + $(this).attr("id") + ')">Delete</a>');
  }); //

  // remove button on tr mouseleave
  $(".hover tr").live("mouseleave", function() {
    $(this).find("td:last-child").html("&nbsp;");
  });

  // TD click event
  $(".hover tr").live("click", function(event) {
    if (event.target.nodeName == "TD") {
      alert("You can track TD click event too....Isnt it amazing !!!");
    }
  });
});
editrow = function(itemId) {
  alert("You clicked 'Edit' link with row id :" + itemId);
}
deleterow = function(itemId) {
  alert("You clicked 'Delete' link with row id :" + itemId);
}
table {
  font-family: verdana;
  font-size: 12px;
}

table th {
  text-align: left;
  background: #D3D3D3;
  padding: 2px;
}

table tr:hover {
  background: #EFEFEF;
}

table tr {
  text-align: left;
}

table td {
  padding: 5px;
}

table td a {
  color: #0454B5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<body>
  <table width="40%" border="0" class="hover">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th width="20%">Action</th>
      </th>
      <tr id="100">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="101">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="102">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="103">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="104">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
      <tr id="105">
        <td>droid</td>
        <td>Andro</td>
        <td></td>
      </tr>
  </table>
</body>

Refer updated fiddle https://jsfiddle.net/VaibhavD/6aehaxr6/2/embedded/result/

Upvotes: 2

amicoderozer
amicoderozer

Reputation: 2144

I don't know if I understand correctly what you want, but check out this fiddle.

You can hide pencil link on document ready or by css and then on div of class nesting fire hover event that shows pencil class link. On mouseleave event hide pencil class link.

Then insert click event on pencil class inside nesting class div.

PS: I haven't find any delete button in your code, but it's the same principal of inserting on click on pencil class.

If you want to show only the pencil icon corresponding to row hover, you can use each function on every link inside div nesting class

$(document).ready(function(){
	
$('.nesting a .pencil').hide();

$('div.nesting a').each(function(){

		$(this).hover(function(){  
    	$(this).find('.pencil').show();
	}).mouseleave(function(){
  	$(this).find('.pencil').hide();
  });
})
  
 $('div.nesting .pencil').click(function(){
 		alert("You have clicked on pencil");
 }) 
 });
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nestchild { margin-left : 15px; }
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nesting">
    
  <a href="#" class="foo-class nesting-item"><span class="glyphicon glyphicon-folder-open" area-hidden="true"></span> Foo <span class="pencil glyphicon glyphicon-pencil"></span></a>
  <div class="nestchild">
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-chevron-right" area-hidden="true"></span> Bar<span class="pencil glyphicon glyphicon-pencil"></span></a>
    <a href="#" class="nesting-item"><span class="glyphicon glyphicon-globe" area-hidden="true"></span> This is a link<span class="pencil glyphicon glyphicon-pencil"></span></a>
    </div>    
      </div>

Upvotes: 0

Related Questions