html中append追加的表格元素和静态显示的元素样式不同_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:34:02
原创
1718人浏览过

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

1、正常显示页面如下:



html代码:












































车次

出发站 
 到达站
id="startendtime">
出发时间

到达时间
id="_span_lishi" style="cursor: pointer;">历时 商务座 特等座 一等座 二等座 高级

软卧
软卧 硬卧 软座 硬座 无座 其它 备注




onclick="mystopstation.open('1','65000c704001','szq','ggq','20151023','3')"
href="javascript:" class="number">c7040


class="lookup" id="65000c704001_01_05_omo" title="查看票价"
style="cursor: pointer;">



深圳 广州东



12:48 14:00


1小时12分 当日到达



--

--

90

282

--

--

--

--

--



--



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



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 = "\n\n";

traincontent += "
\n
\n";
traincontent += "
\n" + traindata.stantraincde + "\n";
traincontent += "
\n\n";
traincontent += "
\n
\n " + traindata.fromstan +  " " + traindata.tostan + "\n";
traincontent += "
\n
\n" + traindata.starttme + " " + traindata.arvtme + "\n
\n";
traincontent += "
\n" + traindata.spttme + " " + traindata.daydif + "\n
\n
\n\n";
traincontent += "\n" + traindata.sw_num + "\n\n";
traincontent += "\n" + traindata.td_num + "\n\n";
traincontent += "\n" + traindata.yd_num + "\n\n";
traincontent += "\n" + traindata.ed_num + "\n\n";
traincontent += "\n" + traindata.gr_num + "\n\n";
traincontent += "\n" + traindata.rw_num + "\n\n";
traincontent += "\n" + traindata.yw_num + "\n\n";
traincontent += "\n" + traindata.rz_num + "\n\n";
traincontent += "\n" + traindata.yz_num + "\n\n";
traincontent += "\n" + traindata.wz_num + "\n\n";
traincontent += "\n" + traindata.qt_num + "\n\n";
traincontent += "\n\n";
traincontent += "\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;
}

尝试了很多办法都不奏效,无奈之下只好到贵论坛寻求帮助!


回复讨论(解决方案)

审查元素检查下结构和样式

宽度是不是被限制了,查看查看样式??

审查元素看到的html如下:

<tbody id="_query_table_datas" style="display: block;"><tr class="bgc" id="ticket_G6260"><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">G6260</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">22:26</strong> <strong class="color999">23:02</strong></div><div class="ls"><strong>00:36</strong> <span class="color999">当日到达</span></div></div></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">9</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">6</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">6</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">75</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td class="no-br"><span class="color999"></span></td></tr><tr style="display: none;" id="price_65000C712401"></tr><tr class="bgc" id="ticket_C7124"><td colspan="4" width="370"><div class="ticket-info clearfix" id="train_num_2"><div class="train"><div><a title="点击查看停靠站信息" onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')" href="javascript:" class="number">C7124</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">22:38</strong> <strong class="color999">23:50</strong></div><div class="ls"><strong>1小时12分</strong> <span class="color999">当日到达</span></div></div></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">107</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">107</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="no-br" width="49"><span class="color999"></span></td></tr><tr id="price_65000C712401" style="display: none;"></tr><tr class="bgc" id="ticket_G6330"><td colspan="4" width="370"><div class="ticket-info clearfix" id="train_num_3"><div class="train"><div><a title="点击查看停靠站信息" onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')" href="javascript:" class="number">G6330</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">23:03</strong> <strong class="color999">23:32</strong></div><div class="ls"><strong>00:29</strong> <span class="color999">当日到达</span></div></div></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">57</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="no-br" width="49"><span class="color999"></span></td></tr><tr id="price_65000C712401" style="display: none;"></tr></tbody>
登录后复制


td里面的style是因为宽度不生效试图通过这种方式改善,结果无效。
style="white-space: nowrap;width=49px;"
登录后复制


审查结果显示第一个单元格宽度是13,不是49,也设置了不让文字换行。



好消息,已经找到问题答案了。问题出在对tbody设置了display:block属性,让表格不再适应原有宽度。注释掉如下代码就可以了。

$("#_query_table_datas").css({"display" : "block"});
登录后复制

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号