Develop Reference

How can I hide my table when I click in the sidebar? and Also when I click the button to show another table the current open table will close?

I have different table in every button, and I hide the table by putting the visibility to hide in the css, when I click the button the table will show. The problem is when I click the button again it won't hide the table anymore. And another thing is when I click the other buttons the table which is currently showing will hide then another table will show.
function toggle() {
if( document.getElementById("Patient-Table").style.visibility='hidden' )
{
document.getElementById("Patient-Table").style.visibility = 'visible';
}
else{
document.getElementById("Patient-Table").remove(visibility);
}
}
#Patient-Table {
visibility: hidden;
}
<div id="Patient-Table" class="container col-sm-8">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>List of <b> Patients</b></h2>
</div>
<div class="col-sm-6">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="tables border shadow border-3 mt-3 mb-5">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>3 </td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
</tbody>
</table>

function patienttoggle() {
let patientTable = document.getElementById("Patient-Table");
if(patientTable.style.display == "none") {
patientTable.style.display = "block";
}else{
patientTable.style.display = "none";
}
}
Heres my upadted JS CODE

Angular ng-repeat doesn't show items

I have worked with angularjs before but for some reason I cannot seem to get it to iterate through my array.
If I look in browser's console I can see that its not empty
Here is my code.
AngularJS
$scope.Clients = [];
$scope.LoadClients = function () {
$.get('/Client/GetClientList').then((d) => {
angular.copy(d.results, $scope.Clients);
console.log($scope.Clients);
$("#clientTable").DataTable();
});
};
HTML
<table class="table table-bordered" id="clientTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>Nr. Branches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in Clients">
<td ng-bind="client.Name"></td>
<td class="text-center" ng-bind="client.Active"></td>
<td class="text-center" ng-bind="client.Branches.length" ng-click="ViewBranches($index)"></td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary btn-xs" ng-click="ViewClient($index)">
<span class="fa fa-eye"></span>
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="ViewBranches($index)">
<span class="fa fa-list"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="DeleteClient($index)">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>

Make span clickable inside a clickable row

I have the following code:
$(".clickable").click(function() {
window.location = $(this).data("target");
});
$(".clickableB").click(function() {
alert('I got a click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Employee</th>
<th>Total hours</th>
<th>Comments</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#events-modal" class="clickable success">
<td>Pedro</td>
<td>1</td>
<td>This is a very loooooooooooooooooooong text</td>
<td>
<span style="color:green" class="clickableB fa fa-check-square"></span>
<span style="color:orange" class="clickableB fa fa-warning"></span>
<span style="color:red" class="clickableB fa fa-minus-square"></span>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="events-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" style="height: 400px">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Then, what I want to get is to show a modal when a click in the row but get an alert when I click on the icons/spans. Everytime I click in the icons, the modal shows up.

Try this. You bind it to every td that isnt a .noclick and use .parent to get the data target.
$(".clickable td:not(.noclick)").click(function() {
console.log("modal click");
window.location = $(this).parent().data("target");
});
$(".clickableB").click(function() {
alert('I got a click');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Employee</th>
<th>Total hours</th>
<th>Comments</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#events-modal" class="clickable success">
<td>Pedro</td>
<td>1</td>
<td>This is a very loooooooooooooooooooong text</td>
<td class="noclick">
<span style="color:green" class="clickableB fa fa-check-square"></span>
<span style="color:orange" class="clickableB fa fa-warning"></span>
<span style="color:red" class="clickableB fa fa-minus-square"></span>
</td>
</tr>
</tbody>
</table>

This is happening because of event bubbling. To prevent it use stopPropagation:
$(".clickable").click(function(evt) {
window.location = $(this).data("target");
});
$(".clickableB").click(function(evt) {
evt.stopPropagation()
alert('I got a click');
});
That way, when you click a row it will open the modal, but when clicking the span, it will only alert without opening the modal

it could help you:
$(".clickable").click(function(e) {
if($(e.target).hasClass("clickableB")) {
alert('I got a click');
}
else {
window.location = $(this).data("target");
}
});
Cheers

There is no data inside clickableB span class, you need to add some text or image then it will be work
$(".clickable").click(function() {
window.location = $(this).data("target");
});
$(".clickableB").click(function() {
alert('I got a click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Employee</th>
<th>Total hours</th>
<th>Comments</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#events-modal" class="clickable success">
<td>Pedro</td>
<td>1</td>
<td>This is a very loooooooooooooooooooong text</td>
<td>
<span style="color:green" class="clickableB fa fa-check-square">clickableB</span>
<span style="color:orange" class="clickableB fa fa-warning">clickableB</span>
<span style="color:red" class="clickableB fa fa-minus-square">clickableB</span>
</td>
</tr>
</tbody>
</table>

instead of
<span style="color:green" class="clickableB fa fa-check-square"></span>
i would just use
<span onclick='functionOfChoice();' style="color:green"> ....

expand and collapse row for ng-table not working

I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>

You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle

Edit specific div's using AngularJS

How can I edit specific div's using Angular? I have a upset of div's at my page, containing tablerows with data. When I click on a edit-button on a specific div, I want that to bed editable.
How can I bind the click event to that particular div? I have done something like this now:
<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
<h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
<table class="table table-condensed pad1">
<tbody>
<tr>
<td><strong>Hastighet</strong></td><td>{{summary.abbData.service}}</td>
</tr>
<tr>
<td><strong>Läghenhetsnr</strong></td><td>{{summary.abbData.apartment}}</td>
</tr>
<tr>
<td><strong>Månadsavgift</strong></td><td>{{summary.abbData.month_fee}}kr</td>
</tr>
<tr>
<td><strong>Anslutningsavgift</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
</tr>
<tr>
<td><strong>Bindningstid</strong></td><td>{{summary.abbData.fixation}}mån</td>
</tr>
<tr>
<td><strong>Registreringsdatum</strong></td><td>{{summary.abbData.reg_date}}</td>
</tr>
</tbody>
</table>
</div>
As you can see, I have ng-click, but I don't know how to bind the div to the click event. ANyone?

please see here jsbin.com/zataro/2/edit?html,output
<tr>
<td><strong>Läghenhetsnr</strong>
</td>
<td>
<span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
<input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
</td>
<td>
<button ng-click="edit.apartment=!edit.apartment">
<span ng-show="!edit.apartment">Edit</span>
<span ng-show="edit.apartment">Save</span>
</button>
</tr>