原頁面代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.min.css"> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap_diushi.js"></script> <style> .table{ width: 60%; margin:100px auto; } </style> <title>bootstrap樣式丟失問題</title> </head> <body> <table class="table"> <tr> <td>#</td> <td>First Name</td> <td>Last Name</td> <td>Username</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </table> </body> </html>
// JavaScript Document //頁面加載完成 $(function(){ //定義一個字符串，准備重新加載一遍頁面 $str=`<tr> <td>#</td> <td>First Name</td> <td>Last Name</td> <td>Username</td> </tr> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr>`; //初始化一遍一樣的代碼 // $('.table').html($str); })
原頁面效果圖：
加載js以后，重新初始化頁面后樣式丟失
效果圖
這個情況是因為js里面的賦值HTML時候，對象錯誤
原代碼：
應該改成：
改完這個地方后樣式就會和加載前一樣，不會丟失
如果是初始化一個全新的表格到<table></table>內，就要把組和起來的HTML代碼里面包含<tbody></tbody>標簽
內容應該是 <tbody>
<tr>
<td>...</td>
<td>...</td>
<tr/>
</tbody>