开发者社区> 问答> 正文

html中append追加的表格元素和静态显示的元素样式不同?

杨冬芳 2016-06-06 10:53:23 1143

最近在仿写12306火车票查询页面。将12306网站的样式取了下来,其静态页面显示正常,但是通过ajax调用后台数据,再通过append回显却出现了表格挤压的情况。

1、正常显示页面如下
screenshot
html代码:

<div class="t-list  mt10">
<table>
<thead>
<tr class="th" id="float">
<th width="90" rowspan="1" colspan="1">车次</th>
<th width="100" rowspan="1" colspan="1"><div class="two-line">
<span>出发站</span> <br clear="none"> <span>到达站</span>
</div></th>
<th width="82" rowspan="1" colspan="1"><div class="two-line"
id="startendtime">
<span class="b3" id="_span_starttime" style="cursor: pointer;">出发时间</span><br>
<span class="b2" id="_span_endtime" style="cursor: pointer;">到达时间</span>
</div></th>
<th width="82" rowspan="1" colspan="1"><span class="b2"
id="_span_lishi" style="cursor: pointer;">历时</span></th>
<th width="49" rowspan="1" colspan="1">商务座</th>
<th width="49" rowspan="1" colspan="1">特等座</th>
<th width="49" rowspan="1" colspan="1">一等座</th>
<th width="49" rowspan="1" colspan="1">二等座</th>
<th width="49" rowspan="1" colspan="1">高级<br clear="none">
软卧
</th>
<th width="49" rowspan="1" colspan="1">软卧</th>
<th width="49" rowspan="1" colspan="1">硬卧</th>
<th width="49" rowspan="1" colspan="1">软座</th>
<th width="49" rowspan="1" colspan="1">硬座</th>
<th width="49" rowspan="1" colspan="1">无座</th>
<th width="49" rowspan="1" colspan="1">其它</th>
<th class="last" rowspan="1" colspan="1">备注</th>
</tr>
</thead>
<tbody id="_query_table_datas" style="">
<tr class="bgc" id="ticket_65000C704001">
<td colspan="4" width="370">
<div class="ticket-info clearfix" id="train_num_1">
<div class="train">
<div>
<a title="点击查看停靠站信息"
onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')"
href="javascript:" class="number">C7040</a>

</div>
<span onclick="$.showTicketPrice('65000C704001','无')"
class="lookup" id="65000C704001_01_05_OMO" title="查看票价"
style="cursor: pointer;"><b style="cursor: pointer;"></b></span>
</div>
<div class="cdz">

<strong class="start-s">深圳</strong> <strong class="end-s">广州东</strong>

</div>
<div class="cds">
<strong class="start-t">12:48</strong> <strong class="color999">14:00</strong>
</div>
<div class="ls">
<strong>1小时12分</strong> <span class="color999">当日到达</span>
</div>
</div>
</td>

<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color333">90</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color333">282</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">无</span>
</td>
<td width="49" class="cursor" onclick="$.showTicketPrice('65000C704001','无')">
<span class="color999">--</span>
</td>
<td width="49" class="no-br"><span class="color999"></span></td>

</tr>
<tr id="price_65000C712401" style="display: none;">
</tr>
</tbody>
</table>
</div>

2、通过ajax向后台发起请求,并通过append回显结果,却出现了表格被收缩的情况。如下图:
screenshot

js代码如下:

function trainQuery(type){
//查询火车余票信息
var tckTyp = type;
var qryDate = $("#train_start_date").val();
var fromStn = $("#fromStationText").val();
var toStn = $("#toStationText").val();
var requestParams = "?qryDte=" + qryDate + "&fromStn=" + fromStn + "&toStn=" + toStn + "&tckTyp=" + tckTyp;
var paraObj = { apiId: 102, interfaceId: 3,  requestParams: requestParams};
$.ajax({
url : "${skx}/practicalTool",
type : "get",
dataType : "json",
data : paraObj,
success : function(json) {
if(json.resultcode == "200"){
var data = json.data;

var fromStan = "";

$("#_query_table_datas").css({"display" : "block"});
$("#_query_table_datas").html("");
$.each(data, function(i, trainData){
fromStan = trainData.fromStan;
var trainContent = "<tr class=\"bgc\" id=\"ticket_"+ trainData.stanTrainCde+ "\">\n<td colspan=\"4\" width=\"370\">\n";

trainContent += "<div class=\"ticket-info clearfix\" id=\"train_num_" + (i+1) + "\">\n<div class=\"train\">\n";
trainContent += "<div>\n<a title=\"点击查看停靠站信息\" onclick=\"myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')\" href=\"javascript:\" class=\"number\">" + trainData.stanTrainCde + "</a>\n";
trainContent += "</div>\n<span onclick=\"$.showTicketPrice('65000C704001','无')\" class=\"lookup\" id=\"65000C704001_01_05_OMO\" title=\"查看票价\" style=\"cursor: pointer;\"><b style=\"cursor: pointer;\"></b></span>\n";
trainContent += "</div>\n<div class=\"cdz\">\n <strong class=\"start-s\">" + trainData.fromStan +  "</strong> <strong class=\"end-s\">" + trainData.toStan + "</strong>\n";
trainContent += "</div>\n<div class=\"cds\">\n<strong class=\"start-t\">" + trainData.startTme + "</strong> <strong class=\"color999\">" + trainData.arvTme + "</strong>\n</div>\n";
trainContent += "<div class=\"ls\">\n<strong>" + trainData.sptTme + "</strong> <span class=\"color999\">" + trainData.dayDif + "</span>\n</div>\n</div>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.sw_Num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.td_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.yd_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.ed_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.gr_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.rw_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.yw_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.rz_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.yz_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.wz_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"cursor\" onclick=\"$.showTicketPrice('65000C704001','无')\">\n<span class=\"color999\">" + trainData.qt_num + "</span>\n</td>\n";
trainContent += "<td style=\"white-space: nowrap;width=49px;\" width=\"49\" class=\"no-br\"><span class=\"color999\"></span></td>\n</tr>\n";
trainContent += "<tr id=\"price_65000C712401\" style=\"display: none;\"></tr>\n";
$("#_query_table_datas").append($(trainContent)); 
});

alert("fromStan:" + fromStan);

$(".errMsg").html("");
}
else{
$("#_query_table_datas").css({"display" : "none"});
$(".errMsg").html(json.reason);
}
},
error : function(){
$("#_query_table_datas").css({"display" : "none"});
$(".errMsg").html("火车票查询异常!");
}
});

return;
}

尝试了很多办法都不奏效,无奈之下只好到贵论坛寻求帮助,还请各位大神不吝赐教!

JSON 前端开发 JavaScript 数据格式
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:27:53

    把这一行 $("#_query_table_datas").css({"display" : "block"}); 注释掉.

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程