表格行未显示

Question

我正在使用淘汰赛Js。当我单击表格中的另一个表格行时，我想显示带有表格标题的表格行。我在下面使用了这段代码。有人可以帮我吗？

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>

有人可以帮我使用淘汰赛获取表行数据吗？

Answer 1

with绑定创建一个新的绑定上下文。因此，您的第二个<table>在当前所选客户端的内部中查找name，email和phone属性。

如果您只是想根据选择是否显示/隐藏第二张表，可以使用if绑定。

如果要根据所选的行对data执行任何过滤器/逻辑，则可以使用computed。

请注意，我还将您的click绑定移动到了<tr>，因此您可以单击行中的任何位置。

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>