如何使​​的內容不可見，但左列除外？

Question

通過javascript在表格中形成了日期陣列。

我要讓內部<tbody data-bind="foreach: prayerData">無形<td>的。我需要每個<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

也許這：

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

Answer 2

您CAND使用CSS這樣的：

.hidden { 
    visibility: hidden 
} 

，比你的HTML文件，你需要補充一點：

Answer 3

給出一個ID或類名的td。你可以使用display:none;或visibility:hidden;。見下面

類

.div{ 

visibility:hidden; //or display:none; 

} 

標識

#div{ 

    visibility:hidden; //or display:none; 

}