隐藏表行的问题

时间:2016-01-06 15:02:40

标签: javascript jquery html knockout.js

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

我无法让它发挥作用。这是一个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>

1 个答案:

答案 0 :(得分:1)

在填充DOM之后,您必须创建敲除绑定。因此,要么将脚本向下移动(最好在</body>标记之前),要么在DOM加载时调用它。