JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-8-27 10:45:09

原页面代码

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

原页面效果图：

加载js以后，重新初始化页面后样式丢失

效果图

这个情况是因为js里面的赋值HTML时候，对象错误

原代码：

应该改成：

改完这个地方后样式就会和加载前一样，不会丢失

如果是初始化一个全新的表格到<table></table>内，就要把组和起来的HTML代码里面包含<tbody></tbody>标签

内容应该是　<tbody>

　　　　　　　　<tr>

　　　　　　　　<tr/>

　　　　　　</tbody>

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

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