Question

通过javascript在表格中形成天数。

我想让<td>内的<tbody data-bind="foreach: prayerData">隐身。我需要每个<td>携带显示的值，如Mon-1，Thrs-1等，但隐藏它们以使它们不可见。我不知道如何通过css或javascript来做到这一点。

HTML：

<table class="small-12 medium-12 large-12 text-center columns responsive">
    <tr>
        <th>Day</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
    </tr>
    <tbody data-bind="foreach: prayerData">
        <tr>
            <td data-bind="text: index"></td>  <!-- Display the current row -->
            <td data-bind="text: M"></td>
            <td data-bind="text: T"></td>
            <td data-bind="text: W"></td>
            <td data-bind="text: T"></td>
            <td data-bind="text: F"></td>
        </tr>
    </tbody>
</table>

脚本：

var dataFromServer = {
    "Morn.": {
        "M": "Mon-1",
        "T": "Tue-1",
        "W": "Wed-1",
        "T": "Thrs-1",
        "F": "Fri-1"
    },
    "Noon": {
        "M": "Mon-2",
        "T": "Tue-2",
        "W": "Wed-2",
        "T": "Thrs-2",
        "F": "Fri-2"
    },
    "Even.": {
         "M": "Mon-3",
        "T": "Tue-3",
        "W": "Wed-3",
        "T": "Thrs-3",
        "F": "Fri-3"
    }
};

var ViewModel = function(data) {
    //map data to an array
    var mappedToArray = [];
    $.each(data, function(index, item) {
        mappedToArray.push(item);
        item.index = index;
    });

    this.prayerData = ko.observableArray(mappedToArray);          
};

ko.applyBindings(new ViewModel(dataFromServer));

Answer 1

你可以像这样使用CSS：

.hidden {
    visibility: hidden
}

并且在你的html文件中你需要添加：

Answer 2

也许这个：

<style>
tbody[data-bind="foreach: prayerData"] tr td:not(:first-child) {
   color: transparent;
}
</style>

Answer 3

为td提供ID或类名。您可以使用display:none;或visibility:hidden;。请参阅下面的示例

类

.div{

 visibility:hidden; //or display:none;

}

编号

#div{

  visibility:hidden;  //or display:none;

}

除左栏外，如何制作隐形内容？

3 个答案: