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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Underscore.js

Underscore.jsは、JavaScriptのためのユーティリティライブラリです。JavaScriptの関数・配列、オブジェクトを扱う際に度々発生する処理がメソッドとしてまとめられています。他のライブラリに依存しないため、稼働中のアプリケーションにも導入可能です。

Q&A

解決済

2回答

2751閲覧

jquery テーブルの任意の場所(特に中間)に複数のテーブルを挿入

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Underscore.js

Underscore.jsは、JavaScriptのためのユーティリティライブラリです。JavaScriptの関数・配列、オブジェクトを扱う際に度々発生する処理がメソッドとしてまとめられています。他のライブラリに依存しないため、稼働中のアプリケーションにも導入可能です。

0グッド

0クリップ

投稿2017/07/04 09:29

編集2017/07/06 01:53

テーブルに登録したデータを
イメージ説明
__bootstrap3__のmodal上でデータを入れなおして
イメージ説明
元の画面に再表示する方法を知りたいです。
一番上の行に入れる方法は↓ので分かるのですが
jqueryでテーブルの一番上に挿入
中間に入れる、また複数入れる時の仕組みが分かりません。
変更する際は元々ある材料が同じデータの行分をmodalに表示して確定する時にその分だけテーブルを消して
そのあとに、挿入しています。

例えば、3行2行3行の計8行のテーブルがあったとして、
そこで、間にある2行を編集して登録します。
その時に、間の2行を消してから編集登録した複数行をいれたいと考えています。
juqeryで:ltと:gtを組み合わせた方法をやってみましたが
編集した1行目は出せるのですが、
2行目のテーブルをその1行目の下にうまく表示させることが出来ません。

こちらのは一番上に追加するパターンです
jquery

var cnt = 0; if(flg_chg==true){ $(".cs-showb").each(function(){ if(($("#tbl .cs-selected").children(".list1-col1").attr('data-b1') == obj.a[sttrow])){ $('#tbl tr.cs-selected').nextUntil(':not(:has(td[data-b2=""]))').addClass('collect'); } }); } if((i==0) && (flg_added == false)){ $("#tbl").html(addtbl(resultone)); flg_added = true; }else if((i==0) && (flg_added == true) && (startrow == 0) && (flg_chg == true)){ var mytemp = addtbl(resultone); $("#tbl").prepend(mytemp); $(".cs-showb:first").addClass('cs-collect'); }else if((i!=0) && (flg_added == true) && (startrow == 0) && (flg_chg == true)){ var mytemp = addtbl(result); $(".cs-showb").each(function(){ if($(this).hasClass('collect') == true){ cnt+=1; } }); if(cnt==0){ $('#tbl .cs-serected').after(mytemp); }else{ $('#tbl .collect:last').after(mytemp); }

cs-serectedはその行を選んでる印として
collectedはその下の同じデータの数だけ付けられます。
分かる方がいましたら、力を貸していただけると幸いです。
また、このコードにのっとらなくても似たようなパターンを知っていたら
そちらを教えて頂けるとありがたいです。

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

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

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

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

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

yambejp

2017/07/05 02:21

どこに何をどう入れたいか例示したほうがいいでしょう
退会済みユーザー

退会済みユーザー

2017/07/06 01:31

失礼しました。ただいま、追記します。
guest

回答2

0

ベストアンサー

$("#t1 tr").eq(startrow).after(mytemp);
で無事表示がうまくいきました。

意外とシンプルでした

投稿2017/07/06 04:50

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

例えば、3行2行3行の計8行のテーブルがあったとして、

そこで、間にある2行を編集して登録します。
その時に、間の2行を消してから編集登録した複数行をいれたいと考えています。

8行のテーブルの4行目から5行目を選ぶのでしたら
$('tr:gt(2):lt(2)')ですね
つまり0から始まる2=3番目の要素より大きく、
残りの0から始まる2=3番目の要素より小さい行を選ぶわけです
同様にltをベースに考えるなら
$('tr:lt(5):gt(2)')
です。

javascript

1$(function(){ 2 $('#b1').on('click',function(){ 3 $('#t1 tr:gt(2):lt(2)').css('background-Color','aqua');; 4 }); 5});

HTML

1<table border id="t1"> 2<tr><td>1</td><td>aaa</td></tr> 3<tr><td>2</td><td>aaa</td></tr> 4<tr><td>3</td><td>aaa</td></tr> 5<tr><td>4</td><td>aaa</td></tr> 6<tr><td>5</td><td>aaa</td></tr> 7<tr><td>6</td><td>aaa</td></tr> 8<tr><td>7</td><td>aaa</td></tr> 9<tr><td>8</td><td>aaa</td></tr> 10</table> 11<input type="button" value="test" id="b1"> 12

投稿2017/07/06 03:05

yambejp

総合スコア114583

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

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

退会済みユーザー

退会済みユーザー

2017/07/06 04:47

回答ありがとうございます。 それでも、一行目しか表示出来ませんでした。 また、自分の質問の内容が説明不足でもあったのも申し訳ないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問