2016-01-06 113 views
1

我试图隐藏然后点击显示表格行。 该行不隐藏,然后点击链接显示。隐藏表格行问题

我无法得到这个工作。这里是一个jsfiddle

我的HTML和JavaScript:

<!DOCTYPE html> 
<html> 
<head> 
<link href="results.css" rel="stylesheet" type="text/css"> 
<script> 
var ViewModel = function() { 
    var self = this; 
    self.showRow = ko.observable(false); 
    self.toggleVisibility = function() { 
     self.showRow(!self.showRow()); 
    }; 
}; 
ko.applyBindings(new ViewModel()); 
</script> 
<title></title> 
</head> 
<body> 
<img alt="" src= 
"http://meritscholarshiplist.com/wordpress/wp- content/uploads/2015/12/searchhead.png" 
style="padding-top:0px;" width="100%"><br> 
<br> 
<p>Check the box next to a Scholarship you would like to save and hit the 
SAVE button.</p> 
<p></p> 
<form action='save.php' method='post'> 
    <div style='width:1750px; margin:0 auto;'> 
     <table align='center' id='scholarship' style='float:left;'> 
      <tr> 
       <th class='head' colspan='3' style='text- align:center;'> 
        University of Michigan--Dearborn<br> 
        <br> 
        Full Tuition<br> 
        <br> 
        Public<br> 
        <br> 
        <a data-bind='click: toggleVisibility' href= 
        '#'>Toggle</a> 
       </th> 
      </tr> 
      <tr data-bind='visible: showRow'> 
       <td colspan='3'>College Type: Public<br> 
       In-State, Out-of-State or Both: In-state<br> 
       For International Students:</td> 
      </tr> 
      <tr> 
       <td colspan='3'>Scholarship Details:<br> 
       Detroit Compact Scholarship awards renewable full- tuition 
       scholarships to qualified students from the Detroit Compact 
       High Schools. Students are selected to participate in this 
       program by school administrators. Students are required to 
       have a recalculated GPA of 3.0 and a minimum composite ACT 
       of 21 or SAT combined score of 970.</td> 
      </tr> 
      <tr> 
       <td colspan='3'>Minimum Required ACT Score: 21<br> 
       Minimum Required SAT Score: 970<br> 
       SAT Score Type: CR+M<br> 
       Minimum Required GPA: 3</td> 
      </tr> 
      <tr> 
       <td colspan='3' style='text-align:center;'> 
        <a href= 
        'http://umdearborn.edu/fa_morefreshmanscholarships' 
        target='_blank'>Link for Full Details</a> 
       </td> 
      </tr> 
      <tr> 
       <td colspan='3'>School Info:<br> 
       Tuition and Fees: $11,524 in-state $23,866 out-of-state<br> 
       Admission Rate: 63.60%<br> 
       Mid 50% SAT Score: SAT Math 498-660 SAT Critical Reading 
       not reported SAT Writing 470-600<br> 
       Mid 50% ACT Score: 22-27<br> 
       US News Ranking: not on the list<br> 
       Forbes Ranking: #437 Best Colleges<br> 
       Money Ranking:</td> 
      </tr> 
      <tr> 
       <td colspan='3'><input name='cell[]' type='checkbox' value= 
       'ARLUJ'>Check the Box and Push Save</td> 
      </tr> 
     </table> 
    </div> 
</form> 

+0

什么是'ko'?你在使用淘汰赛吗? – j08691

+0

是的,我正在尝试使用淘汰赛。 –

+0

您是否添加了正确的包含文件?你的例子不显示这个。 – j08691

回答

1

你有DOM被填充后创建淘汰赛绑定。因此,请将脚本降低(最好在</body>标记之前),或者在DOM负载上调用它。