简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

JS_html/css_WEB-ITnoseを使用してCSS要素（divまたはspan）をページに追加する問題の解決を手伝ってください。

WBOY
リリース： 2016-06-24 12:06:41
オリジナル
1536 人が閲覧しました


;

CSS コードを使用してテーブル

www.865171.cn


//JS を使用して追加する必要があります

;/thead>



;


nowrap>セル 3

＝ scrollRowThead" >

d




  
  
  
  
  


  
  
  
  
  


  
  
  
  
  


セル 2		 セル 3 セル 5
セル 2 セル 3 セル 2 セル 5
セル 2 セル 3< /td>
セルグリッド 4
  		单元格5


e		 单元格2 单元格3 单元格4 单元格5


f		 单元格2 单元格3 单元格4 单元格5


g		 单元格2 单元格3 单元格4 单元格5


<script> <br> //document.all.myt.insertAdjacentHTML("afterBegin","<h1>テキストの前にコンテンツを挿入します</h1>"); insertAdjacentHTML("beforeEnd","<h2>gt;テキストの後にコンテナ内のコンテンツを挿入します</h2>"); <br> //document.all.myt.insertAdjacentHTML("beforeBegin","<h2>後のコンテナ内)テキスト 内にコンテンツを挿入します。"); <br> //document.all.myt.insertAdjacentHTML("beforeBegin","<div id='scrollDiv' class='scrollDiv' >"); <br> <br> < / スクリプト> <br> </table> <br /> ??????????????????? ?? ?????????????????????? <br /> 単純な固定ヘッダー ページ、テーブルの前に DIV または SPAN タグを追加したい実装の背後にJSを使用します（私が望む効果を達成できないため、以下にコメントしました）、長い間探していましたが、解決策が見つかりません。誰かがそれを解決する方法を知っていますか？ <br /> <br /> 私が望む効果は、上に投稿したページのコードでは、テーブルタグの前にDIVがないことです。これを後続のJSに追加する必要があり、テーブルヘッダーを修正する効果も得られます。私は純粋な CSS を使用しています。誰かが私を助けて解決してくれることを願っています。 <br /> <br /> <br /> <br /> <br /> <p>ディスカッションへの返信 (解決策)</p> </p> 次のように jquery の warp メソッドを使用して div をアウトソーシングします<br /> 786bc199ece2772226a0866e1eac83ac <br /> <br /> </p> <p class="sougouAnswer"> 実際、このページは私が使いたいものではありません。DIV を追加し、固定テーブルヘッダーを実装する方法を学ぶためにこのインターフェイスを使用したいだけです。ページはすべてプラットフォームで使用される Java コードです。記述した後は、使用するときにのみ HTML に出力されます。つまり、ページには多数のテーブルがあり、1 つのテーブルにヘッダーとデータが含まれます。コードが機能していないようです。ヘッダーがどこに配置されているかわかりません。 </p> <p class="sougouAnswer"> <br /> ----------------------------------???????????? <br /> <br /> <br /> <br /> <br /><p class="sougouAnswer"> <br /> <br /> <br /> _____________________________________________________________________________ <br /> <br /> このページをご覧いただけますか? <br /> <br />????????????????????????????????????????????? ??? <br /> <br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; <br /> <html> <br> <title>test</title> <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br> <!-- AWS のスキン リソース --> <link rel=Stylesheet type='text/css' media=all href='../aws_skins/_def51/css/public.css'> <br> <style type="text/css"> <br> <!-- <br /> body,table, td, a {font:9pt;} <br /> /*キーポイント: 行ヘッダーのスタイルを固定*/ <br /> .scrollRowThead{ <br />位置:相対; <br /> left:expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft); <br /> z-index:0;} <br /> /*キーポイント: 固定ヘッダースタイル*/ <br /> <br /> <br /> /*行と列の交差*/ <br /> .scrollCR { z-index:3;} <br /> /*div アウトライン*/ <br /> .scrollDiv { <br /> クリア: 両方; <br /> ボーダー: 1px ソリッド #EEEEEE; <br /> OVERFLOW: スクロール;幅: 300px; } <br /> /*行ヘッダーを中央に配置*/ <br /> .scrollColThead td,.scrollColThead th <br /> { text-align: center ;} <br /> /*行ヘッダーの背景*/ <br /> .scrollRowThead,.scrollColThead td,.scrollColThead th <br /> {background-color :#FFFFFF;} <br /> /*テーブルの行*/ <br /> .scrolltable{ <br /> border-bottom:1px Solid #CCCCCC; <br /> border-right:1px Solid #CCCCCC; } <br /> /*テーブルの行セル*/ <br /> .scrollTable th{ <br /> ボーダー左: 1px ソリッド #CCCCCC; <br /> ヘッド tr{ <br /> 位置: 相対;トップ: 式(this.parentElement.parentElement.parentElement.scrollTop); <br /> 背景色:#CCCCCC } <br /> </style> ="http:// code.jquery.com/jquery-1.11.0.min.js"></script>
<script> //+---------- ------ ---------------------------------- <br> //| jQuery プラグイン: テーブルヘッダーを修正しました (まだテストが必要です) <br> / /| 著者: A Ming<br> //+---------------------------- ----------- ----------- <br> (関数 ($) { <br> $.fn.extend({ <br> ScrollTable: 関数 (オプション) { <br> var デフォルト = { maxheight：120、Maxdatatemindexは固定ヘッダー= $ .EXTEND（デフォルト、オプション）; var $cloneTableBody = $this.clone(); <br>                 $cloneTableBody.find("tr").filter(function (index) { return index < options.MaxDataItemIndex }).remove(); <br /> <br /> // 将产生的表头和身体部分放入Container，并做一些微调 <br /> $this.after("<div class='ScrollTableContainer' style='border:1px solid;'></div>"); <br>                 $this.next().append($cloneTableHeader); <br>                 $this.next().append("<div class='ScrollDiv' style='overflow-y:scroll;'></div>"); <br>                 $this.next().css("width", $this.width() + 20); <br>                 $this.next().find("div.ScrollDiv").css({ <br>                     "max-height": options.MaxHeight, <br>                     "width": $this.width() + 20, <br>                     "margin-top": -2 <br>                 }); <br>                 $this.next().find("div.ScrollDiv").append($cloneTableBody); <br>                 $this.remove(); <br>             }); <br>         } <br>     }); <br> })(jQuery); <br> $(function(){ <br>     $('#myt').ScrollTable(); <br> }) <br> </script>






















??????????????????????????????????????????? ??????????
不知道我改了何么，那个表头好像出来又了，现在就差表头及び数据列对齐
总之还是谢谢你，学到了点东西，或许是我这情况太特殊了，我迟点就把分给你吧

前の記事：Excel インタラクティブ ビュー 次の記事：CSS2の書き方_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1665
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1818
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1544
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1455
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1504
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！
打印 | Excel2003输出 | Excel2007输出







制造商RO回答查询




それ; table bgcolor=gray align=center border=0 cellpacing=0 cellpadding=0>


AWS_REPORT_TITLE.style.display='none';
tr >


/td>


< td style='word-WRAP:break-word' width ='40' bgcolor='#afafaf' align='center'>


< ; TD＆gt＆lt;

> 
td style='word-WRAP:break-word' width ='40' bgcolor='#afafaf ' align='center'>2.
;td >NP02
























































































































































































サプライヤーコード 単位< /td>
回答 最新の回答 判定結果
4500025089< ;/td>
NP02 N20
4500025090 D9ZZ00000152 2014-03-03;開発> ;
           
3. 4500025091 NP02 D9ZZ00000152 N20 21016245 2000 2014-03-03 2014-03-03 0 2000              
4. 4500025087 NP02 B0ECKR000020 N20 21016245 1500 2014-03-03 2014-03-03 0 1500              
5. 4500025088 NP02 B0ECKR000020 N20 21016245 3000 2014-03-17 2014-03-17 0 3000              
6. 9000042229 NP01 B0ECKM000037 N20 21016245 1500 2014-02-28 2014-02-28 0 1500              
7. 9000042230 NP01 B0ECKM000037 N20 21016245 3000 2014-03-17 2014-03-17 0 3000              
8. 9000042231 NP01 B0ECKM000037 N20 21016245 3000 2014-03-31 2014-03-31 0 3000              
9. 9000042232 NP01 B1JADV000002 N20 21016245 1000 2014-02-28 2014-02-28 0 1000              
10. 9000042233 NP01 B1JADV000002 N20 21016245 2000 2014-03-17 2014-03-17 0 2000