表内的 Knockout JS 根据可见性折叠两列答案

【问题标题】：Knockout JS inside table collapse two columns depending on visibility表内的 Knockout JS 根据可见性折叠两列
【发布时间】：2019-01-29 22:27:32
【问题描述】：

我是 Knockout JS 绑定的新手，我有这个表，如果 Confirmed 文本为空，则该表应该是一行，带有一个带有按钮的单列，并且以其他方式有两个单独的列。

这是我迄今为止尝试过的，

<table class="table" id="Mytable" style="table-layout: fixed;">
       <tbody data-bind="foreach: info">
              <tr>
                 <td style="vertical-align:middle;">
                     <button type="button" class="btn2 btn-default" data-bind="click:$root.getClick, trimText:shortName, trimTextLength: 5, css: Confirmed == '' ? colspan='2' : ''">22</button>
                 </td>
                 <td style="vertical-align:middle">
                      <span style="color:green" data-bind="text: Confirmed, visible: Confirmed != ''">10</span>
                 </td>
              </tr>
        </tbody>
</table>

但它似乎没有正确显示信息，我不知道我做错了什么。

请对我温柔一点，我正在努力从错误中吸取教训。

【问题讨论】：

能不能把你的 JS 也拿出来看看？

标签： html knockout.js html-table knockout-mvc

【解决方案1】：

colspan 是一个属性，您使用attr 绑定设置：

 data-bind="attr: { 'colspan': Confirmed() ? 1 : 2 }"

在您的具体情况下，我会使用虚拟 if 绑定在两种情况之间切换：

<table>
  <tbody data-bind="foreach: info">
    <tr>
      <!-- ko if: Confirmed -->
      <td colspan="2">
        <button type="button" 
                data-bind="click:$root.getClick, trimText:shortName, trimTextLength: 5">22</button>
      </td>
      <!-- /ko -->
      <!-- ko ifnot: Confirmed -->
      <td></td>
      <td>
        <span data-bind="text: Confirmed"></span>
      </td>
      <!-- /ko -->
    </tr>
  </tbody>
</table>

【讨论】：