表格内的淘汰赛JS根据可见性折叠两列

时间:2018-08-23 13:55:43

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

我在Knockout JS绑定中还很陌生,如果Confirmed文本为空,并且有其他两列,则该表应该是带有按钮的单列的行。 / p>

这是我到目前为止尝试过的,

<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>

,但似乎无法正确显示信息,我也不知道我在做什么错。

请对我温柔,我正在尝试从错误中学习。

1 个答案:

答案 0 :(得分:0)

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>