tableの中のあるカラムに値が入っている行を選択して削除ボタンを押したときに
次にあるカラムに値が入っている行の1つ前までの全ての行を消したいです。
addClassとnextAllを使ってやってみましたが駄目でした。

分かる方がいましたらお願いします。

jquery
1$("#bt-del1).click(function(){
2      $("#tbl1 .cs-selected").nextAll(".collect").remove();
3});

html
1<script type="text/template" id="tlist1">
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        <th class="list1-col7 cs-center">g</th>
11        <th class="list1-col8 cs-center">h</th>
12        <th class="list1-col9 cs-center">i</th>
13      </tr>
14    </thead>
15    <tbody id="tbl1"></tbody>
16</script>
17
18<script type="text/template" id="intbl">
19  <tr class="cs-showb cs-pointer" style="height: 35.56px">
20    <td class="list1-col1" data-b1="<%- val1 %>" id="bld1"><%- val1 %></td>
21    <td class="list1-col2" data-b2="<%- val2 %>" id="bld2"><%- val2 %></td>
22    <td class="list1-col3" data-b3="<%- val3 %>" id="bld3"><%- val3 %></td>
23    <td class="list1-col4" data-b4="<%- val4 %>" id="bld4"><%- val4 %></td>
24    <td class="list1-col5" data-b5="<%- val5 %>" id="bld5"><%- val5 %></td>
25    <td class="list1-col6" data-b6="<%- val6 %>" id="bld6"><%- val6 %></td>
26    <td class="list1-col7" data-b7="<%- val7 %>" id="bld7"><%- val7 %></td>
27    <td class="list1-col8" data-b8="<%- val8 %>" id="bld8"><%- val8 %></td>
28    <td class="list1-col9" data-b9="<%- val9 %>" id="bld9"><%- val9 %></td>
29  </tr>
30</script>

下のようなイメージです

yambejp

2017/06/01 08:41

分かりづらいので具体的にtableを提示してみてください。選択とか削除ボタンもよくわからないです

Lhankor_Mhy

2017/06/01 08:47

#.cs-selected はtypoだと思いますのでご確認ください。

退会済みユーザー

2017/06/02 03:00

タイプミスがありましたね。また、今から編集させて頂きます。ご指摘ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

質問の意図がわからないですが、「ここから」という文字が書かれた行から
「ここまで」という文字が書かれた行までを削除するサンプルを挙げときます

javascript
1$(function(){
2  $('input[type=button][value=del]').on('click',function(){
3    var p=$('#t1').find('tr').parent();
4    var r1=p.find('tr').index(p.find('tr').has($('td').filter(function(){return $(this).text()=='ここから'})))-1;
5    var r2=p.find('tr').index(p.find('tr').has($('td').filter(function(){return $(this).text()=='ここまで'})))+1;
6    console.log(r1+":"+r2);
7    p.find("tr:lt("+r2+"):gt("+r1+")").remove();
8  });
9});

HTML
1<table id="t1">
2<tbody>
3<tr><td>1</td><td>dummy</td><td>dummy</td></tr>
4<tr><td>2</td><td>ここから</td><td>dummy</td></tr>
5<tr><td>3</td><td>dummy</td><td>dummy</td></tr>
6<tr><td>3</td><td>dummy</td><td>dummy</td></tr>
7<tr><td>4</td><td>dummy</td><td>dummy</td></tr>
8<tr><td>5</td><td>dummy</td><td>dummy</td></tr>
9<tr><td>6</td><td>dummy</td><td>dummy</td></tr>
10<tr><td>7</td><td>dummy</td><td>ここまで</td></tr>
11<tr><td>8</td><td>dummy</td><td>dummy</td></tr>
12<tr><td>9</td><td>dummy</td><td>dummy</td></tr>
13</tbody>
14</table>
15<input type="button" value="del">

改訂版

javascript
1<style>
2.cs-selected{background-Color:aqua;}
3.collect{background-Color:lime;}
4</style>
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script>
7$(function(){
8  $('#tbl1 tr').on('click',function(){
9    $('#tbl1 tr').removeClass('cs-selected collect');
10    $(this).addClass('cs-selected');
11  });
12  $('input[type=button][value=clear]').on('click',function(){
13    $('#tbl1 tr').removeClass('cs-selected collect');
14  });
15  $('input[type=button][value=del]').on('click',function(){
16    if($('#tbl1:has(tr.cs-selected)').length>0){
17      $('#tbl1 tr.cs-selected').nextUntil(':not(:has(td[data-b1=""])),:not(:has(td[data-b2=""])),:not(:has(td[data-b3=""]))').addClass('collect');
18//    $('#tbl1 .cs-selected,#tbl1 .collect').remove();
19    };
20  });
21});
22</script>
23<input type="button" value="del">
24<input type="button" value="clear">
25<table border id="tbl1">
26<tr>
27<td>1</td>
28<td data-b1="a">a</td>
29<td data-b2="b">b</td>
30<td data-b3="c">c</td>
31</tr>
32<tr>
33<td>2</td>
34<td data-b1=""></td>
35<td data-b2=""></td>
36<td data-b3=""></td>
37</tr>
38<tr>
39<td>3</td>
40<td data-b1=""></td>
41<td data-b2="">b</td>
42<td data-b3=""></td>
43</tr>
44<tr>
45<td>4</td>
46<td data-b1="a">a</td>
47<td data-b2="b">b</td>
48<td data-b3="c">c</td>
49</tr>
50<tr>
51<td>5</td>
52<td data-b1="a">a</td>
53<td data-b2="b">b</td>
54<td data-b3="c">c</td>
55</tr>
56<tr>
57<td>6</td>
58<td data-b1=""></td>
59<td data-b2=""></td>
60<td data-b3=""></td>
61</tr>
62<tr>
63<td>7</td>
64<td data-b1=""></td>
65<td data-b2=""></td>
66<td data-b3=""></td>
67</tr>
68<tr>
69<td>8</td>
70<td data-b1=""></td>
71<td data-b2=""></td>
72<td data-b3=""></td>
73</tr>
74<tr>
75<td>9</td>
76<td data-b1=""></td>
77<td data-b2=""></td>
78<td data-b3="c">c</td>
79</tr>
80<tr>
81<td>10</td>
82<td data-b1=""></td>
83<td data-b2=""></td>
84<td data-b3=""></td>
85</tr>
86</table>
87

投稿2017/06/01 12:36

編集2017/06/02 06:28

yambejp

総合スコア117934

退会済みユーザー

2017/06/02 03:17

回答ありがとうございます。おそらく、その方法であっていると思います。しかし、自分がまだ初心者なのでうまくいきませんでした。何か、アドバイスが貰えるとありがたいです。 $("#bt-del1,#bt-del2,#bt-del3,#bt-del4").click(function(){ var myId = $(this).attr("id"); switch(myId){ case 'bt-del1': if(($("#tbl1 .cs-selected").children(".list1-col1").attr('data-b1') != "") || ($("#tbl1 .cs-selected").children(".list1-col2").attr('data-b2') != "") || ($("#tbl1 .cs-selected").children(".list1-col3").attr('data-b3') != "") || ($("#tbl1 .cs-selected").children(".list1-col4").attr('data-b4') != "") || ($("#tbl1 .cs-selected").children(".list1-col5").attr('data-b5') != "") || ($("#tbl1 .cs-selected").children(".list1-col6").attr('data-b6') != "")){ var t=$('#tlist1').find('tr').parent(); var r1=t.find('tr').index(t.find('tr').has($('td').filter(function(){ return $("#tbl1").attr("class") =="cs-selected"; }))); var r2=t.find('tr').index(t.find('tr').has($('td').filter(function(){ return ($("#tbl1").children(".list1-col1").attr('data-b1') != "") || ($("#tbl1").children(".list1-col2").attr('data-b2') != "") || ($("#tbl1").children(".list1-col3").attr('data-b3') != "") || ($("#tbl1").children(".list1-col4").attr('data-b4') != "") || ($("#tbl1").children(".list1-col5").attr('data-b5') != "") || ($("#tbl1").children(".list1-col6").attr('data-b6') != ""); }))); console.log(r1+":"+r2); t.find("tr:lt("+r2+"):gt("+r1+")").remove(); break; }

yambejp

2017/06/02 03:30

ちょっと例示が噛み合ってないみたいですが・・・ (1)行を選択とは、クリックするとなにか適当なclassが付加されるという意味でしょうか？普通チェックボックスやラジオボタンなどを配置しないと、選択されたことにならないですけど (2)削除ボタンこれは例示されていませんがテーブルの外側に１個削除ボタンがあるという意味でよろしいですか？ (3)次にあるカラムに値が入っている行まで data-b1からdata-b6がすべて埋まっている行が出てくるまでという意味ですね？最初に出てきた行までが対象で、最後まで消すということではないですね？

退会済みユーザー

2017/06/02 05:07

説明が下手で申し訳ありません。疑問に答えさせていただきます。 (1)行を選択そうです。行を選択すると色がつくclassが付加されます。 (2)削除ボタンそうです。テーブルの上の所に削除ボタンがあります。 (3)次に値が入っている行まで全てではなく1～6までで1つでも値があるまでです。すいません。間違えました。正しくは次に値が入っている行の手前までです。なので、写真を例に出すと、一番上の行を選択して削除すると上から二つまでの行が消えます。

yambejp

2017/06/02 05:28

もう１点だけ最後の行まで探して、1~6まで入ってない場合最後までなのでしょうか？

退会済みユーザー

2017/06/02 05:34

はい、そうです。最後までであってます。説明がたらず申し訳ないです。

yambejp

2017/06/02 06:25

改訂版あげておきました。 data-bは省略して1~3までにしてあります。行を選ぶとaquaになり delを推すとデータがあらわれる行までlimeになります実際には最後に $('#tbl1 .cs-selected,#tbl1 .collect').remove(); を実行すればよいでしょう

退会済みユーザー

2017/06/02 10:39

回答ありがとうございます。改討版の方法で無事、削除することができました。自分ではこんな方法は全く思いつかなったので勉強になります。ご丁寧な説明ありがとうございました。