使用CSS和jQuery

我有這個HTML文件做一個頁面表可以展開和摺疊通過點擊展開表的代碼上+或 - ：使用CSS和jQuery

var $headers = $('.header').click(function() { 
 
    $(this).find('span').text(function(_, value) { 
 
    return value == '-' ? '+' : '-' 
 
    }); 
 
    $(this).nextUntil('tr.header').slideToggle(100, function() {}); 
 
}); 
 
$headers.find('span').text('+') 
 
$('table tr:not(.header)').hide()

table, 
 
tr, 
 
td, 
 
th { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
tr.header { 
 
    cursor: pointer; 
 
}

<table border="0"> 
 
    <tr class="header"> 
 
    <th colspan="2">Header <span>-</span> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr class="header"> 
 
    <th colspan="2">Header <span>-</span> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td>date</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
    <tr> 
 
    <td>data</td> 
 
    <td>data</td> 
 
    </tr> 
 
</table>

我不知道我的文件有什麼問題？它不能運行

來源

2015-04-07 Duy Hưng Androgyne Tenor

你必須寫劇本的底部這樣的 -

<head> 
<style type="text/css"> 
    table, tr, td, th 
    { 
    border: 1px solid black; 
    border-collapse:collapse; 
    } 
    tr.header { 
    cursor:pointer; 
    } 
</style> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

</head> 
<table border="0"> 
    <tr class="header"> 
     <th colspan="2">Header <span>-</span> 
     </th> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr class="header"> 
     <th colspan="2">Header <span>-</span> 
     </th> 
    </tr> 
    <tr> 
     <td>date</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    var $headers = $('.header').click(function() { 
    $(this).find('span').text(function (_, value) { 
     return value == '-' ? '+' : '-' 
    }); 
    $(this).nextUntil('tr.header').slideToggle(100, function() {}); 
    }); 
    $headers.find('span').text('+') 
    $('table tr:not(.header)').hide() 
</script> 
<body>

或把你的腳本ready function

這樣的： -

<script type="text/javascript"> 
$(document).ready(function(){ 
    var $headers = $('.header').click(function() { 
    $(this).find('span').text(function (_, value) { 
     return value == '-' ? '+' : '-' 
    }); 
    $(this).nextUntil('tr.header').slideToggle(100, function() {}); 
    }); 
    $headers.find('span').text('+') 
    $('table tr:not(.header)').hide()  
}) 

</script>

來源

2015-04-07 09:54:09

太感謝你了^^ –

所有我的榮幸 –

所有你需要做的把你的代碼放在$(document).ready(function({})之內。勾選DEMO

$(document).ready(function(){ 
    /// your code here 
});

您可以瞭解更多有關ready()功能HERE

來源

2015-04-07 09:58:04

非常感謝你^^ –

使用CSS和jQuery

回答

相關問題