引用bootstrap后，通过Ajax重新载入的表格样式丢失问题解决

最新推荐文章于 2022-09-13 23:11:51 发布

weixin_33806914

最新推荐文章于 2022-09-13 23:11:51 发布

阅读量417

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/PHP0222wangdong/p/10874172.html

版权

原页面代码

<!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>

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);
    
})

Jscript

原页面效果图：