Question

我有这个小提琴...... http://jsfiddle.net/tvwxyz/1ju0vng1/5/

<input id="cb1" type="checkbox" data-bind="checked: myValue, click: myAction" />
<table id="tb1" border="1">
    <tr>
        <td rowspan="2">a1</td>
        <td>a2</td>
        <td>a3</td>
        <td>a4</td>
        <td>a5</td>
        <td>a6</td>
        <td rowspan="2">a7</td>
    </tr>
    <tr>
    <td>b2</td>
        <td>b3</td>
        <td>b4</td>
        <td>b5</td>
        <td>b6</td>
    </tr>
</table>
<div data-bind="text: myValue"></div>

var viewModel = {
    myValue: ko.observable(false),
    myAction: function() {
        if($("#cb1").prop("checked")){
            $("#tb1 tr:first td").hide();
            $("#tb1 tr:first td:first").show();
            $("#tb1 tr:first td:last").show();
        }else{
            $("#tb1 tr:first td").show();
        }
       return true;
    }    
};

页面加载时，您可以看到A1和A7单元格跨越两行。单击该复选框会隐藏A2-A6（这就是我想要的）但A7不再处于原始位置。

隐藏内部单元格时如何保留原始表格单元格顺序？

Answer 1

我edited your Fiddle以更多的淘汰方式行事并做你想做的事（我认为）。我插入了一个空的colspan = 5单元格，只有在隐藏A单元格时才可见。

<input id="cb1" type="checkbox" data-bind="checked: myValue" />

<table id="tb1" border="1">
    <tr>
        <td rowspan="2">a1</td>
        <td data-bind="visible:myValue" colspan=5></td>
        <td data-bind="visible:!myValue()">a2</td>
        <td data-bind="visible:!myValue()">a3</td>
        <td data-bind="visible:!myValue()">a4</td>
        <td data-bind="visible:!myValue()">a5</td>
        <td data-bind="visible:!myValue()">a6</td>
        <td rowspan="2">a7</td>
    </tr>
    <tr>
        <td>b2</td>
        <td>b3</td>
        <td>b4</td>
        <td>b5</td>
        <td>b6</td>
    </tr>
</table>

<div data-bind="text: myValue"></div>

HTML有点麻烦，但Javascript变得非常简单：

var viewModel = {
    myValue: ko.observable(false),
};

ko.applyBindings(viewModel);

淘汰赛：如何保留表格单元格顺序？

1 个答案: