关于innerHtml()插入的代码样式失效
最近公司要求研发一个手机适应的HTML页面，所以采用了BootStrap框架，页面很简单，就是根据用户输入的四个值，发送AJAX请求，去调用webservice接口得到json数据，把数据通过.innerHTML方法追加到id为neirong的div中，作为一个表格显示在下方，其中表格也是需要带class属性，带有BootStrap的样式。
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.js">script>
<script src="js/bootstrap.min.js">script>
<meta charset="utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<title>信息查询title>
<style>
*{
margin: 0px;
padding: 0px;
}
#all{
padding-top: 30px;
width: 80%;
margin: auto;
}
#gonggao{
padding: 10px;
border: solid 0px gainsboro;
border-radius: 10px;
}
#tupian{
margin-top:10px;
text-align:center;
}
#gonggao p{
padding-left: 20px;
}
#neirong{
margin-top: 20px;
padding: 10px 45px 10px 15px;
border: solid 0px gainsboro;
border-radius: 10px;
}
#neirong button{
margin: 5px 20px;
}
#buttom{
text-align: center;
padding: 10px;
margin-top: 20px;
height: 60px;
white-space:nowrap;
}
a{
padding-left: 2%;
}
style>
head>
<body>
<div id="all">
<div id="gonggao">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" >ck:label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请输入ck" id="ckid" name="ck" >
div>
div>
<div class="form-group">
<label class="col-sm-2 control-label">cw:label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请输入cw" id="cwid" name="cw" >
div>
div>
<div class="form-group">
<label class="col-sm-2 control-label">cp:label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请输入cp" id="cpid" name="cp" >
div>
div>
<div class="form-group">
<label class="col-sm-2 control-label">pc:label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请输入pc" id="pcid" name="pc" >
div>
div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary btn-block btn-lg" onclick="getMessage()">查询button>
div>
div>
form>
div>
div>
<div id="neirong">
div>
div>
<script type="text/javascript">
//定义样式数组
var arr1 = ["success","warning","danger","active","info"];
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
// alert("创建ActiveXObject");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
//alert("创建XMLHttpRequest");
}
}
function createXml(str){
if(document.all){
var xmlDom=new ActiveXObject("Microsoft.XMLDOM")
xmlDom.loadXML(str)
return xmlDom
}
else {
return new DOMParser().parseFromString(str, "text/xml")
}
}
//把字符串转变为json对象
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
function getMessage(){
var url1 = 'http://4**********.com.cn/******/services/I********ve?wsdl'; //为保护隐私，wsdl链接不显示。
//将取出的值，传入参数
var ck=document.getElementById("ckid").value;
if(ck==""||ck==null){
alert("ck未输入！");
return ;
}
var cw=document.getElementById("cwid").value;
var cp=document.getElementById("cpid").value;
var pc=document.getElementById("pcid").value;
var soap1 = ' {"pc":"' ? ';
createXMLHttpRequest();
// alert(xmlHttp);
// alert("创建："+url1+"数据:"+soap1);
xmlHttp.onreadystatechange = showResponseProdu;
xmlHttp.open("POST", url1, true);
xmlHttp.send(soap1);
//alert("send OK");
}
function showResponseProdu(){
var code1 = xmlHttp.responseText;
// alert(code1);
//将得到的返回结果修改编码
var ret1= unescape(code1.replace(/&#x/g, '%u').replace(/;/g, ''));
//alert(ret1);
//将修改后的xml字符串变成xml对象
var xmlDomss1= createXml(ret1);
//取出xml对象中 return元素的值
var xmlName1=xmlDomss1.getElementsByTagName("return")[0].childNodes[0].nodeValue;
//把return元素的值转变为json格式
var obj11 =strToJson(xmlName1);
//对json格式取名字，信息，状态
//alert(xmlName1);
//document.getElementById("productoInfodd").innerText=xmlName1;
if(obj11.status==null){
alert("系统异常！");
}
var statuss1=obj11.status;
if(statuss1=="0"){
{
var str1=' CP CPNAME PC CCLX CW GG ZSL KYS ';
var array = eval(obj11.jsarrayposdtl) ;
for (var i=0;i<array.length;i++){
var ssst=array[i];
var one=ssst;
var dtlarray=eval(one.showbyCP);
for(var j=0 ;j<dtlarray.length;j++){
var dtlone=dtlarray[i];
str1+=' +arr1[j]+'"> '+one.cp+' '+one.cpname+' '+dtlone.pc+' '+dtlone.cclx+' '+dtlone.cw+' '+dtlone.gg+' '+dtlone.zsl+' '+dtlone.kys+' ';
}
}
$("#neirong").html(str1+"
");
}
}else{
var messages=obj11.message;
alert("错误！"+messages);
}
}
script>
body>
html>
在追加str1的时候，一开始neirong的div是这样的，我想把得到的数据 str1+=’ ‘+one.cp+’ ‘+one.cpname+’ ‘+dtlone.pc+’ ‘+dtlone.cclx+’’+dtlone.cw+’ ‘+dtlone.gg+’ ‘+dtlone.zsl+’ ‘+dtlone.kys+’ '; 作为tr使用innerHTML写到< span id=“addTable”>中去，但是追加之后，发现其中带的class="success"是没有起作用的。然后它所在的表格也和上面的不对应。
<div id="neirong">
<table class="table table-hover table-bordered" >
<tr class="active">
<td>CPtd>
<td>CPNAMEtd>
<td>PCtd>
<td>CCLXtd>
<td>CWtd>
<td>GGtd>
<td>ZSLtd>
<td>KYStd>
tr>
<span id="addTable">
span>
table>
div>
谷歌浏览器跑出来的是
<div id="neirong">
<table class="table table-hover table-bordered" >
<tr class="active">
<td>CPtd>
<td>CPNAMEtd>
<td>PCtd>
<td>CCLXtd>
<td>CWtd>
<td>GGtd>
<td>ZSLtd>
<td>KYStd>
tr>
<span id="addTable">
<tr class="active">
<td>CPtd>
<td>CPNAMEtd>
<td>PCtd>
<td>CCLXtd>
<td>CWtd>
<td>GGtd>
<td>ZSLtd>
<td>KYStd>
tr>
span>
table>
div>
这样的 代码是没有表格的。所以最好的解决办法就是，把整个table都作为字符串写到div里面。此处使用的是jquery的html()方法，使用innerHTML方法出现无样式的问题。
同理，应该也解决了我之前遇到的一个问题，可以选择时间修改之前遇到的BUG
之前的 https://blog.csdn.net/qq8693/article/details/81562257