コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML の append によって追加されたテーブル要素は、静的に表示される elements_html/css_WEB-ITnose とは異なるスタイルを持ちます。

HTML の append によって追加されたテーブル要素は、静的に表示される elements_html/css_WEB-ITnose とは異なるスタイルを持ちます。

WBOY
リリース： 2016-06-24 11:34:02
オリジナル
1564 人が閲覧しました

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

1、正常显示页面如下：



html代码：












































车次

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

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

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




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
nn";
trainContent += "n" + trainData.sw_Num + " nn";
trainContent += "n" + trainData.td_num + " nn";
trainContent += "n" + trainData.yd_num + " nn";
trainContent += "n" + trainData.ed_num + " nn";
trainContent += "n" + trainData.gr_num + " nn";
trainContent += "n" + trainData.rw_num + " nn";
trainContent += "n" + trainData.yw_num + " nn";
trainContent += "n" + trainData.rz_num + " nn";
trainContent += "n" + trainData.yz_num + " nn";
trainContent += "n" + trainData.wz_num + " nn";
trainContent += "n" + trainData.qt_num + " nn";
trainContent += "nn";
trainContent += "n";
$("#_query_table_datas").append($(trainContent))
}) ;

alert("fromStan:" + fromStan);

$(".errMsg").html("");
else{
$("#_query_table_datas").css({"display" : "なし"});
$(".errMsg").html(json.reason)
}
},
エラー : 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のスタイルはwidthが反映されないため、この方法で改善しようとしましたが、結果は無効でした。 

style="white-space: nowrap;width=49px;"
ログイン後にコピー


レビューの結果、最初のセルの幅は 49 ではなく 13 であり、テキストが折り返されないように設定されていることがわかります。





良いニュースです。あなたの質問に対する答えが見つかりました。問題は、tbody の display:block 属性の設定にあり、テーブルが元の幅に適応しなくなります。次のコードをコメントアウトするだけです。

リーリー

関連ラベル：
html中append追加的表格元素和静态显示的元素样式不同
ソース：php.cn
前の記事：CSS を導入する 4 つの方法とその優先順位_html/css_WEB-ITnose 次の記事：css template_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
flex css - 折り返すのではなく、特定の高さの後の要素をクリップします 境界線は静的な高さと幅を表します。図のように 3 回折り返すのではなく、項目 5 と 6 を 2 行目に残し、項目 3 と 6 を切り取りたいと思います。 Flex でこれを実現す...
から 2024-04-01 14:02:02
0
1
396
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート