Display icons and buttons when selecting table rows using JavaScript

usergE651 0
Viewed 40

I want the delete, edit and change password icons not to be displayed in the table and when the user selects a row of the table, the icons are displayed.

The rowSelected class is used to select the rows in my table and the display mode of the buttons is svg.

Please guide me how to show or hide table icons with JavaScript.

My sample code in jsfiddle : sample

.btn-TableSVGNormal {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #333 !important;
  fill: #333 !important;
  stroke: #333 !important;
}

.btn-TableSVGNormal:hover {
  color: #2649a5 !important;
  fill: #2649a5 !important;
  stroke: #2649a5 !important;
}

.btn-TableSVGReject {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #333 !important;
  fill: #333 !important;
  stroke: #333 !important;
}

.btn-TableSVGReject:hover {
  color: #f32013 !important;
  fill: #f32013 !important;
  stroke: #f32013 !important;
}

.btn-TableSVGAaccept {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #333 !important;
  fill: #333 !important;
  stroke: #333 !important;

}

.btn-TableSVGAaccept:hover {
  color: #198754 !important;
  fill: #198754 !important;
  stroke: #198754 !important;
}

.TableClassTheme {
  width: 100%;
  background-color: #fff !important;
  border-collapse: collapse;
  color: #333333;
  text-align: center !important;
  font-family: "IRANSansX_Medium" !important;
  padding: 5px !important;
  font-weight: 500;
}

.TableClassTheme td {
  text-align: center !important;
  padding: 10px 7px !important;
}

.TableClassTheme th {
  background-color: #f3f3f3 !important;
  text-align: center !important;
  color: #333333;
  padding: 9px !important;
  box-shadow: 0px 2px 0px #c8c8c8;
}

tbody .TableClassTheme tr {
  text-align: center !important;
  padding: 10px 7px !important;
  border-width: 0 0 2px 0;
  border-color: #ececec;
  border-style: solid;
}

.TableClassTheme thead,
thead .TableClassTheme {
  background-color: #fff !important;
  text-align: center !important;
  color: var(--color-font-table-th);
  padding: 9px !important;
  box-shadow: 0px 2px 0px #c8c8c8 !important;
}

tbody .TableClassTheme tr:hover {
  border-width: 0 0 2px 0;
  border-color: #000;
  border-style: solid;
}

.TableClassTheme .rowSelected {
  background-color: #e6e6e6 !important;
  color: #000 !important;
}
<table class="TableClassTheme" tke="FALSE" id="mtb" rname="RepListUsers" border="0">
  <thead>
    <tr id="startoftable">
      <th class="sticky">row</th>
      <th class="sticky">name</th>
      <th class="sticky">family</th>
      <th class="sticky"></th>
      <th class="sticky"></th>
      <th class="sticky"></th>
    </tr>
  </thead>
  <tbody>
    <tr id="" rw="2">
      <td>3</td>
      <td>test۳</td>
      <td>test۳۳ test۳۳۳</td>
      <td style="width:50%"><button class="btn-TableSVGNormal" onclick="$('#r_sel_Rep').val('2');abb('RepListUsers_fldEditUser','943986fe8d261b26fcb938e611cf4413');;return false"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999" xml:space="preserve">
            <g><g><path d="M506.012,111.514L400.481,5.984c-7.979-7.973-20.888-7.979-28.868-0.014L39.363,337.547 c-2.676,2.669-4.562,6.032-5.44,9.709L0.562,486.828c-1.648,6.897,0.409,14.168,5.426,19.186 c3.874,3.874,9.089,5.985,14.441,5.985c1.586,0,3.18-0.191,4.745-0.565l139.573-33.361c3.677-0.878,7.04-2.757,9.709-5.44 l331.57-332.251C513.991,132.403,513.985,119.48,506.012,111.514z M149.632,439.687L48.03,463.973l24.279-101.602L386.034,49.299 l76.67,76.67L149.632,439.687z"></path> </g> </g> <g> <g> <rect x="340.418" y="76.048" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.1875 299.421)" width="40.843" height="150.192"></rect> </g> </g> <g> <g> <rect x="52.658" y="258.373" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -128.8402 246.5416)" width="361.047" height="40.843"></rect> </g> </g> <g> <g> <rect x="85.448" y="331.51" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -256.1682 193.8131)" width="40.843" height="149.239"></rect> </g> </g> <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></td>
      <td style="width:50%"><button class="btn-TableSVGAaccept" onclick="$('#r_sel_Rep').val('2');abb('RepListUsers_fldChangePassword','943986fe8d261b26fcb938e611cf4413');;return false"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.017 485.017" style="enable-background:new 0 0 485.017 485.017" xml:space="preserve">
            <g>
              <path d="M361.205,68.899c-14.663,0-28.447,5.71-38.816,16.078c-21.402,21.403-21.402,56.228,0,77.631
        c10.368,10.368,24.153,16.078,38.815,16.078s28.447-5.71,38.816-16.078c21.402-21.403,21.402-56.228,0-77.631
        C389.652,74.609,375.867,68.899,361.205,68.899z M378.807,141.394c-4.702,4.702-10.953,7.292-17.603,7.292
        s-12.901-2.59-17.603-7.291c-9.706-9.706-9.706-25.499,0-35.205c4.702-4.702,10.953-7.291,17.603-7.291s12.9,2.589,17.603,7.291
        C388.513,115.896,388.513,131.688,378.807,141.394z"></path>
              <path d="M441.961,43.036C414.21,15.284,377.311,0,338.064,0c-39.248,0-76.146,15.284-103.897,43.036
        c-42.226,42.226-54.491,105.179-32.065,159.698L0.254,404.584l-0.165,80.268l144.562,0.165v-55.722h55.705l0-55.705h55.705v-64.492
        l26.212-26.212c17.615,7.203,36.698,10.976,55.799,10.976c39.244,0,76.14-15.282,103.889-43.032
        C499.25,193.541,499.25,100.325,441.961,43.036z M420.748,229.617c-22.083,22.083-51.445,34.245-82.676,34.245
        c-18.133,0-36.237-4.265-52.353-12.333l-9.672-4.842l-49.986,49.985v46.918h-55.705l0,55.705h-55.705v55.688l-84.5-0.096
        l0.078-37.85L238.311,208.95l-4.842-9.672c-22.572-45.087-13.767-99.351,21.911-135.029C277.466,42.163,306.83,30,338.064,30
        c31.234,0,60.598,12.163,82.684,34.249C466.34,109.841,466.34,184.025,420.748,229.617z"></path>
            </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
          </svg></button></td>
      <td style="width:50%"><button class="btn-TableSVGReject" onclick="showmodal('Hdp_DelUser');$('#btnDelete').click(function(){$('#Hdp_DelUser').modal('hide');});;return false"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
            <g><g><g><polygon points="353.574,176.526 313.496,175.056 304.807,412.34 344.885,413.804            "></polygon>
                  <rect x="235.948" y="175.791" width="40.104" height="237.285"></rect>
                  <polygon points="207.186,412.334 198.497,175.049 158.419,176.52 167.109,413.804           "></polygon>
                  <path d="M17.379,76.867v40.104h41.789L92.32,493.706C93.229,504.059,101.899,512,112.292,512h286.74 c10.394,0,19.07-7.947,19.972-18.301l33.153-376.728h42.464V76.867H17.379z M380.665,471.896H130.654L99.426,116.971h312.474
                L380.665,471.896z"></path></g></g></g><g><g>
                <path d="M321.504,0H190.496c-18.428,0-33.42,14.992-33.42,33.42v63.499h40.104V40.104h117.64v56.815h40.104V33.42 C354.924,14.992,339.932,0,321.504,0z"></path>
              </g>
            </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></td>
    </tr>
    <tr id="" rw="3" class="rowSelected" sel="TRUE">
      <td>4</td>
      <td>kljhkl;jh</td>
      <td>یبلا بیلا</td>
      <td style="width:50%"><button class="btn-TableSVGNormal" onclick="$('#r_sel_Rep').val('2');abb('RepListUsers_fldEditUser','943986fe8d261b26fcb938e611cf4413');;return false"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999" xml:space="preserve">
            <g><g><path d="M506.012,111.514L400.481,5.984c-7.979-7.973-20.888-7.979-28.868-0.014L39.363,337.547 c-2.676,2.669-4.562,6.032-5.44,9.709L0.562,486.828c-1.648,6.897,0.409,14.168,5.426,19.186 c3.874,3.874,9.089,5.985,14.441,5.985c1.586,0,3.18-0.191,4.745-0.565l139.573-33.361c3.677-0.878,7.04-2.757,9.709-5.44 l331.57-332.251C513.991,132.403,513.985,119.48,506.012,111.514z M149.632,439.687L48.03,463.973l24.279-101.602L386.034,49.299 l76.67,76.67L149.632,439.687z"></path> </g> </g> <g> <g> <rect x="340.418" y="76.048" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.1875 299.421)" width="40.843" height="150.192"></rect> </g> </g> <g> <g> <rect x="52.658" y="258.373" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -128.8402 246.5416)" width="361.047" height="40.843"></rect> </g> </g> <g> <g> <rect x="85.448" y="331.51" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -256.1682 193.8131)" width="40.843" height="149.239"></rect> </g> </g> <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></td>
      <td style="width:50%"><button class="btn-TableSVGAaccept" onclick="$('#r_sel_Rep').val('2');abb('RepListUsers_fldChangePassword','943986fe8d261b26fcb938e611cf4413');;return false"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.017 485.017" style="enable-background:new 0 0 485.017 485.017" xml:space="preserve">
            <g>
              <path d="M361.205,68.899c-14.663,0-28.447,5.71-38.816,16.078c-21.402,21.403-21.402,56.228,0,77.631
        c10.368,10.368,24.153,16.078,38.815,16.078s28.447-5.71,38.816-16.078c21.402-21.403,21.402-56.228,0-77.631
        C389.652,74.609,375.867,68.899,361.205,68.899z M378.807,141.394c-4.702,4.702-10.953,7.292-17.603,7.292
        s-12.901-2.59-17.603-7.291c-9.706-9.706-9.706-25.499,0-35.205c4.702-4.702,10.953-7.291,17.603-7.291s12.9,2.589,17.603,7.291
        C388.513,115.896,388.513,131.688,378.807,141.394z"></path>
              <path d="M441.961,43.036C414.21,15.284,377.311,0,338.064,0c-39.248,0-76.146,15.284-103.897,43.036
        c-42.226,42.226-54.491,105.179-32.065,159.698L0.254,404.584l-0.165,80.268l144.562,0.165v-55.722h55.705l0-55.705h55.705v-64.492
        l26.212-26.212c17.615,7.203,36.698,10.976,55.799,10.976c39.244,0,76.14-15.282,103.889-43.032
        C499.25,193.541,499.25,100.325,441.961,43.036z M420.748,229.617c-22.083,22.083-51.445,34.245-82.676,34.245
        c-18.133,0-36.237-4.265-52.353-12.333l-9.672-4.842l-49.986,49.985v46.918h-55.705l0,55.705h-55.705v55.688l-84.5-0.096
        l0.078-37.85L238.311,208.95l-4.842-9.672c-22.572-45.087-13.767-99.351,21.911-135.029C277.466,42.163,306.83,30,338.064,30
        c31.234,0,60.598,12.163,82.684,34.249C466.34,109.841,466.34,184.025,420.748,229.617z"></path>
            </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
          </svg></button></td>
      <td style="width:50%"><button class="btn-TableSVGReject" onclick="showmodal('Hdp_DelUser');$('#btnDelete').click(function(){$('#Hdp_DelUser').modal('hide');});;return false"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
            <g><g><g><polygon points="353.574,176.526 313.496,175.056 304.807,412.34 344.885,413.804            "></polygon>
                  <rect x="235.948" y="175.791" width="40.104" height="237.285"></rect>
                  <polygon points="207.186,412.334 198.497,175.049 158.419,176.52 167.109,413.804           "></polygon>
                  <path d="M17.379,76.867v40.104h41.789L92.32,493.706C93.229,504.059,101.899,512,112.292,512h286.74 c10.394,0,19.07-7.947,19.972-18.301l33.153-376.728h42.464V76.867H17.379z M380.665,471.896H130.654L99.426,116.971h312.474
                L380.665,471.896z"></path></g></g></g><g><g>
                <path d="M321.504,0H190.496c-18.428,0-33.42,14.992-33.42,33.42v63.499h40.104V40.104h117.64v56.815h40.104V33.42 C354.924,14.992,339.932,0,321.504,0z"></path>
              </g>
            </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></td>
    </tr>
    <tr id="" rw="4">
      <td>5</td>
      <td>rty</td>
      <td>rty rty</td>
      <td style="width:50%"><button class="btn-TableSVGNormal" onclick="$('#r_sel_Rep').val('2');abb('RepListUsers_fldEditUser','943986fe8d261b26fcb938e611cf4413');;return false"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999" xml:space="preserve">
            <g><g><path d="M506.012,111.514L400.481,5.984c-7.979-7.973-20.888-7.979-28.868-0.014L39.363,337.547 c-2.676,2.669-4.562,6.032-5.44,9.709L0.562,486.828c-1.648,6.897,0.409,14.168,5.426,19.186 c3.874,3.874,9.089,5.985,14.441,5.985c1.586,0,3.18-0.191,4.745-0.565l139.573-33.361c3.677-0.878,7.04-2.757,9.709-5.44 l331.57-332.251C513.991,132.403,513.985,119.48,506.012,111.514z M149.632,439.687L48.03,463.973l24.279-101.602L386.034,49.299 l76.67,76.67L149.632,439.687z"></path> </g> </g> <g> <g> <rect x="340.418" y="76.048" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.1875 299.421)" width="40.843" height="150.192"></rect> </g> </g> <g> <g> <rect x="52.658" y="258.373" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -128.8402 246.5416)" width="361.047" height="40.843"></rect> </g> </g> <g> <g> <rect x="85.448" y="331.51" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -256.1682 193.8131)" width="40.843" height="149.239"></rect> </g> </g> <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></td>
      <td style="width:50%"><button class="btn-TableSVGAaccept" onclick="$('#r_sel_Rep').val('2');abb('RepListUsers_fldChangePassword','943986fe8d261b26fcb938e611cf4413');;return false"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.017 485.017" style="enable-background:new 0 0 485.017 485.017" xml:space="preserve">
            <g>
              <path d="M361.205,68.899c-14.663,0-28.447,5.71-38.816,16.078c-21.402,21.403-21.402,56.228,0,77.631
        c10.368,10.368,24.153,16.078,38.815,16.078s28.447-5.71,38.816-16.078c21.402-21.403,21.402-56.228,0-77.631
        C389.652,74.609,375.867,68.899,361.205,68.899z M378.807,141.394c-4.702,4.702-10.953,7.292-17.603,7.292
        s-12.901-2.59-17.603-7.291c-9.706-9.706-9.706-25.499,0-35.205c4.702-4.702,10.953-7.291,17.603-7.291s12.9,2.589,17.603,7.291
        C388.513,115.896,388.513,131.688,378.807,141.394z"></path>
              <path d="M441.961,43.036C414.21,15.284,377.311,0,338.064,0c-39.248,0-76.146,15.284-103.897,43.036
        c-42.226,42.226-54.491,105.179-32.065,159.698L0.254,404.584l-0.165,80.268l144.562,0.165v-55.722h55.705l0-55.705h55.705v-64.492
        l26.212-26.212c17.615,7.203,36.698,10.976,55.799,10.976c39.244,0,76.14-15.282,103.889-43.032
        C499.25,193.541,499.25,100.325,441.961,43.036z M420.748,229.617c-22.083,22.083-51.445,34.245-82.676,34.245
        c-18.133,0-36.237-4.265-52.353-12.333l-9.672-4.842l-49.986,49.985v46.918h-55.705l0,55.705h-55.705v55.688l-84.5-0.096
        l0.078-37.85L238.311,208.95l-4.842-9.672c-22.572-45.087-13.767-99.351,21.911-135.029C277.466,42.163,306.83,30,338.064,30
        c31.234,0,60.598,12.163,82.684,34.249C466.34,109.841,466.34,184.025,420.748,229.617z"></path>
            </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
          </svg></button></td>
      <td style="width:50%"><button class="btn-TableSVGReject" onclick="showmodal('Hdp_DelUser');$('#btnDelete').click(function(){$('#Hdp_DelUser').modal('hide');});;return false"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve">
            <g><g><g><polygon points="353.574,176.526 313.496,175.056 304.807,412.34 344.885,413.804            "></polygon>
                  <rect x="235.948" y="175.791" width="40.104" height="237.285"></rect>
                  <polygon points="207.186,412.334 198.497,175.049 158.419,176.52 167.109,413.804           "></polygon>
                  <path d="M17.379,76.867v40.104h41.789L92.32,493.706C93.229,504.059,101.899,512,112.292,512h286.74 c10.394,0,19.07-7.947,19.972-18.301l33.153-376.728h42.464V76.867H17.379z M380.665,471.896H130.654L99.426,116.971h312.474
                L380.665,471.896z"></path></g></g></g><g><g>
                <path d="M321.504,0H190.496c-18.428,0-33.42,14.992-33.42,33.42v63.499h40.104V40.104h117.64v56.815h40.104V33.42 C354.924,14.992,339.932,0,321.504,0z"></path>
              </g>
            </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></td>
    </tr>
  </tbody>
</table>

jquery javascript
0 Answers
Related