changes

by Kanzari Haithem

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container-fluid">
<table class="table table-sm table-hover" id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="selected" data-key="1">
      <td>1</td>
      <td class="myname">Name1</td>
    </tr>
    <tr class="selected" data-key="2">
      <td>2</td>
      <td class="myname">Name2</td>
    </tr>
    <tr class="selected" data-key="3">
      <td>3</td>
      <td class="myname">Name3</td>
    </tr>
  </tbody>
</table>
</div>

<div class="container-fluid">
<form><input class="btn btn-sm btn-secondary mybtn" OnClick="./mysite.html?" type="button" value="Next" ></form>
</div>

JavaScript

$('#myTable').on('click', '.selected', function(event) {
  if ($(this).hasClass('bg-info')) {
    $(this).removeClass('bg-info');
  } else {
    $(this).addClass('bg-info').siblings().removeClass('bg-info');
  }
});

$("#myTable tr").click(function(AddGroupIDandName) {
  $(this).addClass('selected').siblings().removeClass("selected");
	$('.mybtn').attr('OnClick','./mysite.html?GetID='+$(this).attr('data-key')+'&GetName='+$(this).find('td:last-child').text());
});