图片上 <tr> 将鼠标悬停在删除行上

Question

Goal : Hovering over table row <tr> causes a button to become visible to the right of the <tr> element (outside of the table). Clicking this button deletes the row.

I'm struggling with the CSS and the mechanics of showing the button. I find I am able to create the desired button hide/show behavior on a <div> tag, but I can't figure out how to implement it within a table.

See fiddle here .

The actual deleting of the row is fairly straightforward to me...

$('table tr input').click(function(e) {
  var answer = confirm("Delete row?")
  if (answer) {

   var ind=$(this).closest('td').parent()[0].sectionRowIndex;
   $("tr:eq("+ind+")").remove();

  } else {
    //some code
  }

});

Answer 1

Regarding the "outside of the table" requirement, instead of matching up absolute/relative positions to row positions, you can try out putting the button in a 4th column. And instead of applying the border to the table, apply it to TDs, and turn off the border or the 4th column. This will keep your button aligned with the rows but appear as if it is outside of the table.

https://jsfiddle.net/sg2y9fya/

 .show-image td { border: solid 1px black; } .show-image th { border-top: solid 1px black; } .show-image th:first-child { border-left: solid 1px black; } .show-image th:last-child { border-right: 1px solid black; } .show-image td:last-child { border: 0; } .show-image td:last-child input { display:none; } .show-image tr:hover > td:last-child > input { display:block; } table.show-image { table-padding: 0; table-spacing: 0; border-collapse: collapse; } 

 <table class="show-image"> <tr> <th>header1</th> <th>header2</th> <th>header3</th> </tr> <tr> <td>data1</td> <td>data2</td> <td>data3</td> <td><input class="row-del-btn" type="button" value=" Delete " /></td> </tr> <tr> <td>data4</td> <td>data5</td> <td>data6</td> <td><input class="row-del-btn" type="button" value=" Delete " /></td> </tr> <tr> <td>data7</td> <td>data8</td> <td>data9</td> <td><input class="row-del-btn" type="button" value=" Delete " /></td> </tr> </table> 

Answer 2

That's easy, just two CSS rules:

 $('table td:last-child button').click(function(e) { var answer = confirm("Delete row?") if (answer) { var $row = $(this).closest('tr'); $row.remove(); } else { //some code } }); 

 tr > td:last-child > button {visibility:hidden;} tr:hover > td:last-child > button {visibility:visible;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="show-image"> <tr> <th>header1</th> <th>header2</th> <th>header3</th> </tr> <tr> <td>data1</td> <td>data2</td> <td>data3<button>x</button></td> </tr> <tr> <td>data4</td> <td>data5</td> <td>data6<button>x</button></td> </tr> <tr> <td>data7</td> <td>data8</td> <td>data9<button>x</button></td> </tr> </table>