Twitter Bootstrap Question posted in

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

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

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search