Table row was not showing - html

Question

I am using knockout Js. I want to show the table row with table header when I click another table row in the table. I used this code below. Can anyone help me out?
var ViewModel = function() {
var self = this;
this.client_details = [{
name: 'Jack',
email: 'jack#gmail.io',
phone: '256987',
address: 'US',
dob: '24/01/1975',
taxid: '125'
}, {
name: 'Hari',
email: 'hari#yahoo.com',
phone: '247896',
address: 'chennai',
dob: '02/01/1975',
taxid: '255'
}];
this.datas = [{
name: 'John',
email: 'john#gmail.com',
phone: '58963287'
}, {
name: 'JohnBert',
email: 'bert#gmail.com',
phone: '589625887'
}];
self.seletedRow = ko.observable();
self.goToFolder = function(folder) {
self.seletedRow(folder);
};
};
ko.applyBindings(new ViewModel(self.datas));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table width='100%'>
<thead>
<tr>
<th width='25%'>Client Name</th>
<th width='25%'>Email</th>
<th class='Phone' width='15%'>Phone</th>
<th class='Address' width='10%'>Address</th>
<th class='dob' width='15%'>DOB</th>
<th class='tax' width='15%'>Tax ID</th>
</tr>
</thead>
<tbody data-bind="foreach: client_details">
<tr class="table_row">
<td data-bind="text: name,click: $root.goToFolder"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
<td data-bind="text: address"></td>
<td data-bind="text: dob"></td>
<td data-bind="text: taxid"></td>
</tr>
</tbody>
</table>
<table data-bind="with: seletedRow">
<thead>
<tr>
<th width='25%'>User Name</th>
<th width='25%'>Email</th>
<th class='Phone' width='15%'>Phone</th>
</tr>
</thead>
<tbody data-bind="foreach: datas">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
</tr>
</tbody>
</table>
Can anyone help me to get the table row data using knockout?

Answer 1

The with binding creates a new binding context. Your second <table> therefore looks for the name, email and phone properties inside the currently selected client.
If you just want to show/hide the second table based on if there's a selection, you can use the if binding.
If you want to perform any filters/logic on data based on the row that's selected, you can use a computed.
Note that I've also moved your click binding to the <tr>, so you can click anywhere in the row.
var ViewModel = function() {
var self = this;
this.client_details = [{
name: 'Jack',
email: 'jack#gmail.io',
phone: '256987',
address: 'US',
dob: '24/01/1975',
taxid: '125'
}, {
name: 'Hari',
email: 'hari#yahoo.com',
phone: '247896',
address: 'chennai',
dob: '02/01/1975',
taxid: '255'
}];
this.datas = [{
name: 'John',
email: 'john#gmail.com',
phone: '58963287'
}, {
name: 'JohnBert',
email: 'bert#gmail.com',
phone: '589625887'
}];
self.selectedRow = ko.observable();
self.goToFolder = function(folder) {
self.selectedRow(folder);
};
};
ko.applyBindings(new ViewModel(self.datas));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table width='100%'>
<thead>
<tr>
<th width='25%'>Client Name</th>
<th width='25%'>Email</th>
<th class='Phone' width='15%'>Phone</th>
<th class='Address' width='10%'>Address</th>
<th class='dob' width='15%'>DOB</th>
<th class='tax' width='15%'>Tax ID</th>
</tr>
</thead>
<tbody data-bind="foreach: client_details">
<tr class="table_row" data-bind="click: $root.goToFolder">
<td data-bind="text: name"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
<td data-bind="text: address"></td>
<td data-bind="text: dob"></td>
<td data-bind="text: taxid"></td>
</tr>
</tbody>
</table>
<table data-bind="if: selectedRow">
<thead>
<tr>
<th width='25%'>User Name</th>
<th width='25%'>Email</th>
<th class='Phone' width='15%'>Phone</th>
</tr>
</thead>
<tbody data-bind="foreach: datas">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
</tr>
</tbody>
</table>