圖片上<tr>懸停刪除行

Question

目標：將鼠標懸停在錶行<tr>使按鈕成爲到<tr>元件的右側可見（外表中的）。點擊此按鈕刪除該行。

我正在努力與CSS和顯示按鈕的機制。我發現我能夠在<div>標籤上創建所需的按鈕隱藏/顯示行爲，但我無法弄清楚如何在表格中實現它。

See fiddle here。

行的實際刪除是相當簡單的，我...

$('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

關於「外的表「要求，而不是將絕對/相對位置匹配到行位置，您可以嘗試將按鈕放在4t中h列。而不是將邊框應用於表格，將其應用於TD，並關閉邊框或第4列。這將保持你的按鈕與行對齊，但看起來好像它在表外。

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

這很簡單，只有兩個CSS規則：

$('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>