[Html]如何使滑鼠點擊資料行後，維持被點選樣式?

[Html&Javascrip&CSS] Data selection

在Html前端頁面的操作攸關使用者體驗(UX)的優劣性，滑鼠在html前端網頁的相關操作會輔以Javascript和CSS來進行，其中在樣式<style>屬於CSS可以發揮的部分，常見有五種偽類選擇狀態。

本文範例期望呈現兩種滑鼠選擇狀態的功能，如下:

功能1.當滑鼠在資料行之間移動時，資料行顯示不同背景色，讓使用者明確滑鼠和資料行的交互位置。 如上述參考文章，該功能可用 hover來處理。

功能2.當滑鼠點擊某資料行並釋放後，資料行呈現被點選狀態的樣式，如上述視頻所示。

程式代碼片段如下，在head段落中，插入<style></style>段落，並設定hover和selection-row的CSS樣式，其中selection-row為點擊資料行的樣式，使被點選的資料行呈現橘色背景和加粗字體效果。

	<style type="text/css">
		table {
			border-collapse: collapse;
			width: 100%;
		}
		
		th, td {
			text-align: left;
			padding: 8px;
			border-bottom: 1px solid #ddd;
		}

		tr:hover {
			background-color: #f5f5f5;
		}
		tr.selected-row {
			background-color: orange;
			font-weight: bold;
		}
	</style>

在body和script段落中，設定id=data-table的on<click>事件，使其點選後，先清除table的所有樣式，再回調selection-row設定的樣式，藉由#button的function來定義selection-row remove()。

<script>
	//點選欲刪除的資料行	
	   var selectedRow = null;
        $("#data-table").on("click", "tbody tr", function() {
          // 選擇整行資料
          if (selectedRow != null) {
            selectedRow.removeClass("selected-row");
          }
          $(this).addClass("selected-row");
          selectedRow = $(this);
        });
		
		$("#deleteDataBtn").click(function() {
          // 刪除品號按鈕
         if (selectedRow != null) {
		   if (confirm("確定刪除該筆資料嗎？")) {
                alert("刪除資料成功");
                selectedRow.remove()
              }
		 }
		 else{
			alert("請點選欲刪除的資料行");
		 }
        });
	
	</script>