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

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

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

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

HTML

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

Q&A

解決済

3回答

2322閲覧

jquery テーブルの任意の行を複数削除した時にオブジェクト配列でも該当する場所を削除する

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

HTML

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

0グッド

0クリップ

投稿2017/06/16 09:34

編集2017/06/23 09:00

いつもお世話になっております。
オブジェクト配列に入れるデータmodalから入力された値を格納しています。
あるテーブルを複数行、消したときにオブジェクト配列に格納してあるデータで該当するところを
消したいです。
オブジェクト配列に入れる理由はテーブルの中身の他にもデータを格納して、
そのオブジェクト配列をajaxでサーバ側にデータを送って登録する為です。
入力フォームは

html

1<script type="text/template" id="modal"> 2 <div> 3 <div class="col-md-3 col-sm-6 pd_num" data-p1="" data-id=""> 4 <h4>q</h4> 5 <p><input type="text" id="pnum" name="num"></p> 6 <p><button class="pdnseh" type="button" data-no="1">検索</button></p> 7 </div> 8 <div class="col-md-2 col-sm-6"> 9 <h4>w</h4> 10 <p><input type="text" id="model" name="model" readonly></p> 11 </div> 12 <div class="col-md-4 col-sm-6"> 13 <h4>e</h4> 14 <p><input type="text" id="name" name="name" readonly></p> 15 </div> 16 <div class="col-md-3 col-sm-6"> 17 <h4>r</h4> 18 <p><input type="text" id="pt" name="pt" readonly></p> 19 </div> 20 </div> 21 22 <div>区分 23 <form id="dispopr" class="dispopr cs-center" > 24 <span style="margin-right:20px;"> 25 <input type="radio" value="1" name="dpor">1 26 </span> 27 28 <span style="margin-right:20px;"> 29 <input type="radio" value="2" name="dpor">2 30 </span> 31 32 <span style="margin-right:20px;"> 33 <input type="radio" value="3" name="dpor">3 34 </span> 35 36 <span style="margin-right:20px;"> 37 <input type="radio" value="4" name="dpor">4 38 </span> 39 40 <span style="margin-right:20px;"> 41 <input type="radio" value="C" name="dpor">C 42 </span> 43 </form> 44 </div> 45 46 <div> 47 <div class="col-md-3 col-sm-5"> 48 <h4>a</h4> 49 <p><select class="form-control input-sm wcont" id="kme" name="kme" style="width:80%;"></select></p> 50 </div> 51 <div class="col-md-2 col-sm-4"> 52 <h4>b</h4> 53 <p><select class="form-control input-sm" id="wme" name="wme"></select></p> 54 </div> 55 <div class="col-md-2 col-sm-2"> 56 <h4>c</h4> 57 <p><input type="checkbox" id="wking" name="wking" style="width:20px; height:20px;"></p> 58 </div> 59 <div class="col-md-2 col-sm-3" style="margin-left:20px;"> 60 <h4>d</h4> 61 <p><input type="text" data-td="" id="acttime" class="pdtime cs-time input-sm cs-center timepicker">H</p> 62 </div> 63 <div class="col-md-2 col-sm-3" style="margin-left:20px;"> 64 <h4>f</h4> 65 <p><input type="text" data-td="" id="nontime" class="pdtime cs-time input-sm cs-center timepicker">H</p> 66 </div> 67 </div> 68 69 <table id="ipt" class="table table-bordered"></table> 70 71 <div> 72 <button type="button" class="addb btn btn-info btn-sm" id="bt-addt">追加</button> 73 </div> 74</script> 75 76<script type="text/template" id="used-lm"> 77 <table class="table table-bordered" id="mc" style="width: 65%"> 78 <thead id="th"> 79 <th class="mstb1 cs-center">z</th> 80 <th class="mstb2 cs-center">x</th> 81 <th class="mstb3 cs-center">c</th> 82 <th class="mstb4 cs-center">v</th> 83 <th class="mstb5 cs-center">b</th> 84 <th class="mstb6 cs-center">n</th> 85 </thead> 86 <tbody id="testm"></tbody> 87 </table> 88</script> 89 90<script type="text/template" id="addmtltbl"> 91 <tr class="cs-lista" style="height: 20px"> 92 <td class="tbl1" data-m1="<%- val1 %>" id="aval1"><%- val1 %></td> 93 <td class="tbl2" data-m2="<%- val2 %>" id="aval2"><%- val2 %></td> 94 <td class="tbl3" data-m3="<%- val3 %>" id="aval3"><%- val3 %></td> 95 <td class="tbl4" data-m4="<%- val4 %>" id="aval4"><%- val4 %></td> 96 <td class="tbl5" data-m5="<%- val5 %>" id="aval5"><%- val5 %></td> 97 <td class="tbl6" data-m6="<%- val6 %>" id="aval6"><%- val6 %></td> 98 </tr> 99</script>

削除したいテーブルは

html

1<script type="text/template" id="ust-list1"> 2 <thead id="th-list1"> 3 <tr> 4 <th class="list1-col1 cs-center">a</th> 5 <th class="list1-col2 cs-center">b</th> 6 <th class="list1-col3 cs-center">c</th> 7 <th class="list1-col4 cs-center">d</th> 8 <th class="list1-col5 cs-center">e</th> 9 <th class="list1-col6 cs-center">f</th> 10 </tr> 11 </thead> 12 <tbody id="showltbl1"></tbody> 13</script> 14 15<script type="text/template" id="addbtbl"> 16 <tr class="cs-showb cs-pointer" style="height: 35.56px" data-row=""> 17 <td class="list1-col1" data-b1="<%- val1 %>" id="bld1"><%- val1 %></td> 18 <td class="list1-col2" data-b2="<%- val2 %>" id="bld2"><%- val2 %></td> 19 <td class="list1-col3" data-b3="<%- val3 %>" id="bld3"><%- val3 %></td> 20 <td class="list1-col4" data-b4="<%- val4 %>" id="bld4"><%- val4 %></td> 21 <td class="list1-col5" data-b5="<%- val5 %>" id="bld5"><%- val5 %></td> 22 <td class="list1-col6 cs-center" data-b6="<%- val6 %>" id="bld6"><%- val6 %></td> 23 </tr> 24</script>

js

1if(($("#showltbl1 .cs-selected").children(".list1-col1").attr('data-b1') != "") || 2 ($("#showltbl1 .cs-selected").children(".list1-col2").attr('data-b2') != "") || 3 ($("#showltbl1 .cs-selected").children(".list1-col3").attr('data-b3') != "") || 4 ($("#showltbl1 .cs-selected").children(".list1-col4").attr('data-b4') != "") || 5 ($("#showltbl1 .cs-selected").children(".list1-col5").attr('data-b5') != "") || 6 ($("#showltbl1 .cs-selected").children(".list1-col6").attr('data-b6') != "")){ 7 if($('#showltbl1:has(tr.cs-selected)').length>0){ 8 $('#showltbl1 tr.cs-selected').nextUntil(':not(:has(td[data-b1=""])), 9 :not(:has(td[data-b2=""])), 10 :not(:has(td[data-b3=""])), 11 :not(:has(td[data-b4=""])), 12 :not(:has(td[data-b5=""])), 13 :not(:has(td[data-b6=""]))').addClass('collect'); 14 $('#showltbl1 .cs-selected,#showltbl1 .collect').remove(); 15 }; 16}

上のjqueryのようにある条件下のテーブルをすべて消したときに
そのデータが該当するオブジェクト配列の部分を消したいのですがやり方が分かりません。
↓のはオブジェクト配列です。 オブジェクトの格納方法は.pushで行っています。

jquery

1objList1 = {"a":[],"b":[],,"c":[],"d":[],"d":[],"e":[],"f":[],"g":[],"h":[]};

無知で申し訳ありませんがどうか、力をお貸しください。

追記:↓の方法では駄目でした

jquery

1//変数の宣言はしてあります。 2$("cs-showb").each(function(){ 3 if($(this).hasclass('cs-serected')==true){ 4 strow=i; 5 } 6 if($(this).hasclass('collect')==true){ 7 endrow+=1; 8 } 9 i+=1; 10}); 11objList1.splice(strow,strow+endrow);

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

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

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

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

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

guest

回答3

0

データの構造が想像できません。
.remove() で削除するときにその要素がどのオブジェクト/配列なのかを特定して、objList1 からそのオブジェクトを検索して削除する必要があります。

投稿2017/06/16 17:52

chitoku

総合スコア1610

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

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

退会済みユーザー

退会済みユーザー

2017/06/18 15:55

回答ありがとうございます。 返事が遅れてしまいもうしわけありません。 その方法が分からなくて困っています。
chitoku

2017/06/22 00:45

console.log(objList1) を実行してコンソールの結果を貼り付けてください。objList1 がどのような構造をしているかが分からないと回答できません。
退会済みユーザー

退会済みユーザー

2017/06/23 04:40

失礼しました。 構造はこうなっています。 a:Array(6) b:Array(6) c:Array(6) d:Array(6) e:Array(6) f:Array(6) g:Array(6) h:Array(6) 中身も見せたほうがよろしいでしょうか?
guest

0

中途半端なソースの提示でよくわからないのですが、逆に
残っている列からあたらしくobjList1を作ればよいのでは?

投稿2017/06/16 13:15

yambejp

総合スコア114574

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

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

退会済みユーザー

退会済みユーザー

2017/06/18 15:57

回答ありがとうございます。 また、返信が遅れてしまい申し訳ありません。 objlistに入れてあるのは内容不足で申し訳ありませんが modal上で入力された価を入れていますのでそのやり方はできません。
yambejp

2017/06/19 00:54

HTMLの構造がわかりません たぶんindexを拾ってきておなじ順番のオブジェクト要素を削除するのだとは思います HTMLを提示し、その挙動によりオブジェクトのどの要素が削除されるか提示してください
退会済みユーザー

退会済みユーザー

2017/06/23 05:06

提示させていただきました。 こちらでよろしいでしょうか
yambejp

2017/06/23 07:23

テーブルにa~hの列があって、objList1 の各要素が列に対応しており テーブルの各行が、objList1の要素の配列のデータにあたるということでしょうか? テーブルのn行目を削除するとobjList1["a"][n]も削除されるということ? もう少し簡単なモデルで試されたほうが、聞く方も答える方もラクだと思うんですけどね
退会済みユーザー

退会済みユーザー

2017/06/23 08:57

はい、その通りです 複雑だと分かりづらいですもんね。失礼しました 次回から気をつけます
guest

0

ベストアンサー

$("cs-showb").each(function(){
if($(this).hasclass('cs-serected')==true){
strow=i;
}
if($(this).hasclass('collect')==true){
endrow+=1;
}
i+=1;
});
objList1.splice(strow,strow+endrow)
}

objList1.splice(strow,strow+endrow)を
objList1.a.splice(strow,endrow)






のようにしたら出来ました。
回答してくださった方々ありがとうございました。

投稿2017/06/23 08:59

編集2017/06/23 09:02
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問