クリックして選択する効果を実現するCSS

レンダリングは次のとおりです。

 セルをクリックして要素を選択し、オレンジ色の背景を追加して、セルの右下隅にチェックマークを追加します。選択した要素をもう一度クリックして、エフェクトの選択を解除します。コードは次のように表示されます。

htmlコード：

<table class="table table-bordered" id="tblField"  style="border-collapse:collapse;">
          <tbody id="tbField">
                <tr>
                  <td>Tanmay</td>
                  <td>Bangalore</td>
                  <td>560001</td>
                </tr>
                <tr>
                  <td>Sachin</td>
                  <td>Mumbai</td>
                  <td>400003</td>
                </tr>
                <tr>
                  <td>Uma</td>
                  <td>Pune</td>
                  <td>411027</td>
                </tr>
          </tbody>
</table>

cssコード：

<style>
      #tblField td{
      border:1px solid #ccc;
      cursor:pointer;
      position: relative;
      }
      #tblField td:hover{
      background-color:#ED7101;
      }
      .activeStyle{
      background-color:#ED7101;
      }
      .correct:before {
      content:"\2714";
      font-size:14px;
      color: white;
      position: absolute;
      top:15px;
      right:0;
      }
 </style>

jsコード：

//选择某个字段
function CheckedField(obj) {
    $(obj).toggleClass("activeStyle correct");//背景色切换
}