質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2393閲覧

tableの固定ヘッダーに関して

color

総合スコア90

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/06/13 01:56

現在、あるプロジェクトで機能追加をしております。

検索値を入力後、非同期通信でテーブルを追加する仕様です。

html

1<div id="list" class="col-md-12" style="overflow: scroll;"> 2 <table class="search-list> 3 <tbody> 4 <tr id="nonyu_tr"> 5 <th nowrap style="text-align:center;">sample</th> 6 </tr> 7 </tbody> 8 </table> 9</div> 10<script> 11var result =<tr><td></td></tr>を作成して以下のコードで追加しています。 12$('#nonyu_tr').after(result); 13</script>

この様に動的に追加した表のヘッダーや左のカラムを固定したいのですが、
何かご情報お持ちの方、ご教示頂ければ幸いです。

fixed-midashi.jsを使用して見たのですが、
ヘッダーの位置がずれてしまったり、表の高さが縮んだりとうまく行っておりません。
※bootstrapも使用しております。

何卒、宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/06/13 01:57

動的に追加される箇所のhtmlソースがどうなっているか、見せてもらうことは可能でしょうか。スタイルシート無しで単純なtrやtdを挿入しているだけですか?
m.ts10806

2017/06/13 02:01

htmlを正しく転記してください。閉じ漏れなどが散見されます。
guest

回答1

0

具体的にヘッダのズレ等が発生するのは、fixed-midashiでcreate()を行った後のtableに行を追加した時ですか?
であれば、

  • Tableに対して.remove()してfixed-midashiを解除
  • trを追加
  • .create()で再度見出しを設定

をしてみてもだめですか?

投稿2017/06/13 08:19

編集2017/06/13 08:23
satoshi_tajima

総合スコア337

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

color

2017/06/14 02:19

初期はヘッダーのみ入れてます。ただし初期はdisplay:none;で非表示にしています。 検索後、<tr><td></td></tr>の繰り返しをafterで追加し、 fixed-midashiでcreate()を行います。 なんだかtdを入れた事でthの幅も変わった事を通知出来ていない?とか、 nowrapが入っているのですが、fixed-midashiがコピーする際に、生成する親タグが邪魔しているのか、 折り返して表示されています。developper tool的にはnowrapはついてました。 何か試せる事ありませんか?何卒宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問