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

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

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

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

HTML

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

CSS

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

Q&A

解決済

3回答

2562閲覧

table colspanは保持したまま tdの表示・非表示

xx_6_6_xx

総合スコア42

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/08/06 02:53

編集2019/08/06 05:52

実現したいこと

colspanはそのままで、結合する<td>を一部非表示にすること
は可能なのでしょうか・・・?

たとえば

html

1<table> 2 <tbody> 3 <tr> 4 <td colspan="4" class="top">ああああ</td> 5 <td>いいい</td> 6 </tr> 7 <tr> 8 <td>100</td> 9 <td class="test"></td> 10 <td class="test"></td> 11 <td>200</td> 12 <td>100</td> 13 </tr> 14 <tr> 15 <td>100</td> 16 <td class="test"></td> 17 <td class="test"></td> 18 <td>200</td> 19 <td>100</td> 20 </tr> 21 </tbody> 22</table>

html

1<table> 2 <tbody> 3 <tr> 4 <td colspan="4" class="top">ああああ</td> 5 <td>いいい</td> 6 </tr> 7 <tr> 8 <td>100</td> 9 <!-- <td class="test"></td> 10 <td class="test"></td> --> 11 <td>200</td> 12 <td>100</td> 13 </tr> 14 <tr> 15 <td>100</td> 16 <!-- <td class="test"></td> 17 <td class="test"></td>--> 18 <td>200</td> 19 <td>100</td> 20 </tr> 21 </tbody> 22</table>

colspan="4"は変えることなく、
td.test を非表示にしたいのです。。

現状

visibility:hidden;で
非表示にはできたのですが、
td.test の幅は残ったままになっていて、、、

display:none;にすると、後続のセルが詰めてくるので。。

そもそも・・・

考えた結果、できないのでは?と思ったのですが、
どなたか分かるかた、教えていただけるとありがたいです。。。。
よろしくお願い致します。

追記します

すみません、追記します。。。
やはり、Aグル―プのcolspanを変更するしかないのでしょうか。。。。

↓0の列を非表示にして、幅だけをつめたい
イメージ説明

追記します(実際のコードです)

html

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 2 3<table id="tbl"> 4 <tbody> 5 <tr class="head"> 6 <td rowspan="2">No</td> 7 <td rowspan="2">タイトル</td> 8 <td rowspan="2" class="detail">データ</td> 9 <td rowspan="2" class="date"></td> 10 <td rowspan="3">累計</td> 11 <td rowspan="3">統計</td> 12 <td colspan="14">18年度</td> 13 <td rowspan="3">18年度合計</td> 14 15 </tr> 16 <tr class="head"> 17 <td colspan="6">18上期</td> 18 <td rowspan="2">18上期合計</td> 19 <td colspan="6">18下期</td> 20 <td rowspan="2">18下期合計</td> 21 </tr> 22 <tr class="head"> 23 <td>No</td> 24 <td>品番</td> 25 <td class="detail">品名</td> 26 <td class="date">確認日</td> 27 <td class="m1">18/1</td> 28 <td class="m2">18/2</td> 29 <td class="m3">18/3</td> 30 <td class="m4">18/4</td> 31 <td class="m5">18/5</td> 32 <td class="m6">18/6</td> 33 <td class="m7">18/7</td> 34 <td class="m8">18/8</td> 35 <td class="m9">18/9</td> 36 <td class="m10">18/10</td> 37 <td class="m11">18/11</td> 38 <td class="m12">18/12</td> 39 </tr> 40 <tr> 41 <td rowspan="2">1</td> 42 <td rowspan="2">RNG001</td> 43 <td rowspan="2" class="detail">りんご</td> 44 <td class="date">2019年2月28日</td> 45 <td>3</td> 46 <td></td> 47 <td class="m1"></td> 48 <td class="m2"></td> 49 <td class="m3"></td> 50 <td class="m4"></td> 51 <td class="m5">40</td> 52 <td class="m6">13</td> 53 <td>13</td> 54 <td class="m7">5</td> 55 <td class="m8"></td> 56 <td class="m9"></td> 57 <td class="m10"></td> 58 <td class="m11"></td> 59 <td class="m12">627</td> 60 <td>627</td> 61 <td>640</td> 62 63 </tr> 64 <tr> 65 <td class="date">2019年3月29日</td> 66 <td>3</td> 67 <td></td> 68 <td class="m1"></td> 69 <td class="m2"></td> 70 <td class="m3"></td> 71 <td class="m4"></td> 72 <td class="m5">40</td> 73 <td class="m6">12</td> 74 <td>12</td> 75 <td class="m7">5</td> 76 <td class="m8"></td> 77 <td class="m9"></td> 78 <td class="m10"></td> 79 <td class="m11"></td> 80 <td class="m12">627</td> 81 <td>627</td> 82 <td>639</td> 83 </tr> 84 <tr> 85 <td colspan="3" rowspan="2"></td> 86 <td>2019年2月28日</td> 87 <td>42</td> 88 <td>10</td> 89 <td class="m1"></td> 90 <td class="m2"></td> 91 <td class="m3"></td> 92 <td class="m4"></td> 93 <td class="m5">40</td> 94 <td class="m6">18</td> 95 <td>18</td> 96 <td class="m7">5</td> 97 <td class="m8"></td> 98 <td class="m9"></td> 99 <td class="m10"></td> 100 <td class="m11"></td> 101 <td class="m12">627</td> 102 <td>627</td> 103 <td>645</td> 104 </tr> 105 <tr> 106 <td>2019年3月29日</td> 107 <td>42</td> 108 <td>10</td> 109 <td class="m1"></td> 110 <td class="m2"></td> 111 <td class="m3"></td> 112 <td class="m4"></td> 113 <td class="m5">40</td> 114 <td class="m6">17</td> 115 <td>17</td> 116 <td class="m7">5</td> 117 <td class="m8"></td> 118 <td class="m9"></td> 119 <td class="m10"></td> 120 <td class="m11"></td> 121 <td class="m12">627</td> 122 <td>627</td> 123 <td>644</td> 124 </tr> 125</table>

css

1table{ 2 width:160%; 3 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 4 color:#333; 5 margin:15px 0px 15px 5px; 6 text-align:right; 7} 8 9table , td{ 10 border-left: 1px solid #595959; 11 border-right: 1px solid #595959; 12 border-collapse: collapse; 13 font-size:11px !important; 14} 15 16td{ 17 padding-right:2px; 18} 19 20 21.head td{ 22 background-color:#76fb89; 23 text-align:center; 24 border:1px solid #555; 25} 26 27.date{ 28 width:100px; 29 padding:2px 0px 2px 5px; 30 text-align:center; 31 color:#333; 32} 33 34.detail{ 35 width:370px; 36 height:25px; 37 padding:2px 0px 2px 5px; 38 text-align:left; 39 border-bottom:1px solid #595959; 40} 41 42#tbl tr:nth-child(2n+5){ 43 border-bottom:1px solid #555; 44} 45 46#tbl tr:nth-child(2n+4) td:nth-child(1), 47#tbl tr:nth-child(2n+4) td:nth-child(2){ 48 border-bottom:1px solid #555; 49} 50 51#tbl tr:nth-last-child(2) td:nth-child(2){ 52 border-bottom:none !important; 53}

jQuery

1 j = 4; 2 for(i=5;i<=36;++i){ 3 a = $('#tbl tr:nth-last-child(3) td:nth-child('+ i +')')//確認日1合計 4 b = $('#tbl tr:nth-last-child(2) td:nth-child('+ j +')')//確認日2合計 5 if(a.text()== ""){//確認日1合計が空白 6 if(b.text()==""){//確認日2合計が空白 7 a = a.attr("class");//クラス名取得 8 b = b.attr("class");//クラス名取得 9 change = $('#tbl tr td.'+ a +',#tbl tr td.'+ b +''); 10 change.css('visibility','hidden'); 11 change.css('border-left','solid 0'); 12 change.css('border-right','solid 0'); 13 change.css('width','0'); 14 change.css('padding','0'); 15 change.css('margin','0'); 16 change.css('border-left','solid 0'); 17 } 18 } 19 j = j + 1; 20 }

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

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

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

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

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

maisumakun

2019/08/06 02:57

「幅が残ったまま」でも「後続のセルが詰めてくる」のでもないとなると、どのような形の表にしたいのでしょうか。
azuapricot

2019/08/06 02:58

確かに幅残したくないしセルを詰めたくもないしとなるとわけわからんですね。 図示してもらいたいですね
m.ts10806

2019/08/06 03:24

colspan変えるのが最も無難に思えますね。
guest

回答3

0

ベストアンサー

諸条件がととのえばこう

css

1<style> 2table{border-collapse:collapse;} 3td{border:solid 1px;} 4td.test{border-left:solid 0;border-right:solid 0;width:0;padding:0;margin:0} 5td.test+td{border-left:solid 0} 6</style> 7<table> 8 <tbody> 9 <tr> 10 <td colspan="4" class="top">ああああ</td> 11 <td>いいい</td> 12 </tr> 13 <tr> 14 <td>100</td> 15 <td class="test"></td> 16 <td class="test"></td> 17 <td>200</td> 18 <td>100</td> 19 </tr> 20 <tr> 21 <td>100</td> 22 <td class="test"></td> 23 <td class="test"></td> 24 <td>200</td> 25 <td>100</td> 26 </tr> 27 </tbody> 28</table>

調整版

javavascript

1<style> 2table{border-collapse:collapse;} 3td{border:solid 1px;} 4td.test{background-Color:yellow;} 5td.test{border-left:solid 0;border-right:solid 0;width:0;padding:0;margin:0;background-Color:yellow;} 6td.test+td{border-left:solid 0} 7</style> 8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 9<script> 10$(function(){ 11 Array(12).fill(null).map((x,y)=>y+1).forEach(i=>{ 12 if($(`.m${i}:gt(0)`).filter(function(){return $(this).text()!==""}).length==0){ 13 $(`.m${i}:eq(0)`).text(""); 14 $(`.m${i}`).addClass("test"); 15 } 16 17 }); 18}); 19</script> 20<table id="tbl"> 21 <tbody> 22 <tr class="head"> 23 <td rowspan="2">No</td> 24 <td rowspan="2">タイトル</td> 25 <td rowspan="2" class="detail">データ</td> 26 <td rowspan="2" class="date"></td> 27 <td rowspan="3">累計</td> 28 <td rowspan="3">統計</td> 29 <td colspan="14">18年度</td> 30 <td rowspan="3">18年度合計</td> 31 32 </tr> 33 <tr class="head"> 34 <td colspan="6">18上期</td> 35 <td rowspan="2">18上期合計</td> 36 <td colspan="6">18下期</td> 37 <td rowspan="2">18下期合計</td> 38 </tr> 39 <tr class="head"> 40 <td>No</td> 41 <td>品番</td> 42 <td class="detail">品名</td> 43 <td class="date">確認日</td> 44 <td class="m1">18/1</td> 45 <td class="m2">18/2</td> 46 <td class="m3">18/3</td> 47 <td class="m4">18/4</td> 48 <td class="m5">18/5</td> 49 <td class="m6">18/6</td> 50 <td class="m7">18/7</td> 51 <td class="m8">18/8</td> 52 <td class="m9">18/9</td> 53 <td class="m10">18/10</td> 54 <td class="m11">18/11</td> 55 <td class="m12">18/12</td> 56 </tr> 57 <tr> 58 <td rowspan="2">1</td> 59 <td rowspan="2">RNG001</td> 60 <td rowspan="2" class="detail">りんご</td> 61 <td class="date">2019年2月28日</td> 62 <td>3</td> 63 <td></td> 64 <td class="m1"></td> 65 <td class="m2"></td> 66 <td class="m3"></td> 67 <td class="m4"></td> 68 <td class="m5">40</td> 69 <td class="m6">13</td> 70 <td>13</td> 71 <td class="m7">5</td> 72 <td class="m8"></td> 73 <td class="m9"></td> 74 <td class="m10"></td> 75 <td class="m11"></td> 76 <td class="m12">627</td> 77 <td>627</td> 78 <td>640</td> 79 80 </tr> 81 <tr> 82 <td class="date">2019年3月29日</td> 83 <td>3</td> 84 <td></td> 85 <td class="m1"></td> 86 <td class="m2"></td> 87 <td class="m3"></td> 88 <td class="m4"></td> 89 <td class="m5">40</td> 90 <td class="m6">12</td> 91 <td>12</td> 92 <td class="m7">5</td> 93 <td class="m8"></td> 94 <td class="m9"></td> 95 <td class="m10"></td> 96 <td class="m11"></td> 97 <td class="m12">627</td> 98 <td>627</td> 99 <td>639</td> 100 </tr> 101 <tr> 102 <td colspan="3" rowspan="2"></td> 103 <td>2019年2月28日</td> 104 <td>42</td> 105 <td>10</td> 106 <td class="m1"></td> 107 <td class="m2"></td> 108 <td class="m3"></td> 109 <td class="m4"></td> 110 <td class="m5">40</td> 111 <td class="m6">18</td> 112 <td>18</td> 113 <td class="m7">5</td> 114 <td class="m8"></td> 115 <td class="m9"></td> 116 <td class="m10"></td> 117 <td class="m11"></td> 118 <td class="m12">627</td> 119 <td>627</td> 120 <td>645</td> 121 </tr> 122 <tr> 123 <td>2019年3月29日</td> 124 <td>42</td> 125 <td>10</td> 126 <td class="m1"></td> 127 <td class="m2"></td> 128 <td class="m3"></td> 129 <td class="m4"></td> 130 <td class="m5">40</td> 131 <td class="m6">17</td> 132 <td>17</td> 133 <td class="m7">5</td> 134 <td class="m8"></td> 135 <td class="m9"></td> 136 <td class="m10"></td> 137 <td class="m11"></td> 138 <td class="m12">627</td> 139 <td>627</td> 140 <td>644</td> 141 </tr> 142</table>

js解説

m1~m12というクラスを処理するために1~12という文字が必要です
「Array(12).fill(null).map((x,y)=>y+1)」が12個の要素を持った配列をつくり
そこ要素に1から順番に12まで割り振ってます、つまり
[1,2,3,4,5,6,7,8,9,10,11,12]という配列です。

見やすくするとこういうこと。

javascript

1[1,2,3,4,5,6,7,8,9,10,11,12].forEach(i=>{ 2 if($(`.m${i}:gt(0)`).filter(function(){return $(this).text()!==""}).length==0){ 3 $(`.m${i}:eq(0)`).text(""); 4 $(`.m${i}`).addClass("test"); 5 } 6});

上記1~12の配列から一つずつ要素を取り出しiに入れてループしています
仮にまずiが1だったとき

「$(.m${i}:gt(0))」は展開すると「$('.m1:gt(0)')」とうこと
つまりm1クラスで0番目の要素より大きい要素。
m1クラスがついたセルは5個あるので先頭を除く4個分の要素を指します。

それをfilterして中身(text)が空ではないものの数を数えます(length)
それが0個ということは先頭以外のすべてのセルが空ということ
その場合、

  • $(.m${i}:eq(0))=$('.m1:eq(0)')つまりm1クラスの先頭セルのテキストを""にする
  • $(.m${i})=$('.m1')つまりm1クラス全てにtestというクラスを付加する

という流れです
これを1~12まで繰り返しています

IE対応

IEで問題になる箇所は

  • Arrayにfillする機能がない
  • アロー関数がNG
  • ヒアドキュメント非対応

javascript

1$(function(){ 2 [1,2,3,4,5,6,7,8,9,10,11,12].forEach(function(i){ 3 if($('.m'+i+':gt(0)').filter(function(){return $(this).text()!==""}).length==0){ 4 $('.m'+i+':eq(0)').text(""); 5 $('.m'+i).addClass("test"); 6 } 7 }); 8});

投稿2019/08/06 04:38

編集2019/08/07 05:52
yambejp

総合スコア114572

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

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

xx_6_6_xx

2019/08/06 05:07 編集

ありがとうございます! 記載頂いたコード実行すると、想像どおりの挙動になりました・・・! しかし実際のコードに合わせると、罫線は消えたのですが、 やはり幅が空いてしまいます。。。
yambejp

2019/08/06 05:15

> 実際のコードに合わせる 実際のコードをどこかに例示できませんか?
xx_6_6_xx

2019/08/06 05:52

実際のコードを記載してみました;;; 宜しくお願い致します!!
yambejp

2019/08/06 06:06

追記分jqueryでcssをいじっていませんか? 当該箇所にaddClassでtestを付加してみては?
xx_6_6_xx

2019/08/06 06:18

なるほど! addClass('test')にすると、罫線はうまく消えました。。。! あとは、18/1などのテキストも消して、 スペースが縮まってくれればよいのですが。。;; 度々すみません;;
yambejp

2019/08/06 06:43 編集

調整版あげておきました
xx_6_6_xx

2019/08/07 01:46

丁寧にありがとうございます。。。!!大変感謝します。。 昨日からずっと、切り分けてコードが何してるのか調べながら確認しているのですが、 具体的にどういう処理をしているのかわかりません。。 お手数だとは思うのですが、解説していただけると大変ありがたいです。。
xx_6_6_xx

2019/08/07 05:37

なるほど…!非常に理解できました。。。! 本当にありがとうございます。。。! これにIEはまだ対応してないのですね。。。;; IEにも対応させようと思い、 一部改変してみたのですが、上手くいきません、、 (=>を>=にしただけで怒られました、、) もしよければ、間違っている所を指摘して頂けますでしょうか;;。。 $(function(){ Array(12).fill(null).map((x,y)>=y+1).forEach(i>={ if($('.m'+i+':gt(0)').filter(function(){return $(this).text()!==""}).length==0){ $('.m'+i+':eq(0)').text(""); $('.m'+i+'').addClass("test"); } }); });
yambejp

2019/08/07 05:53

今日日IE対応を前提に書く人は少なくなっているので IE対応が必要な質問は「IE対応必須」的な注意書きをしたほうがいいですよ とはいえIE対応版追記しておきました
xx_6_6_xx

2019/08/07 07:14

ありがとうございます・・・! エラーになる原因まで記載頂けて、とてもありがたいです。。。 無事に、望んでいた挙動になりました!!助かりました。。 やはり今どきIEって。。。というところですよね;; 今後はIE対応必須の時は、条件に記載しようと思います。。。 度々の質問に丁寧にご回答頂き、本当にありがとうございました。。!
guest

0

td.testだけwidth: 0に縮めてみたら、どうなりますでしょうか。

投稿2019/08/06 04:36

maisumakun

総合スコア145121

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

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

xx_6_6_xx

2019/08/06 05:08

ありがとうございます! 少しだけ縮みました!ですが、0にならないようです。。。
guest

0

下記を使用しても無理ですか?

CSS

1visibility:hidden; 2```  3http://www.htmq.com/style/visibility.shtml

投稿2019/08/06 02:57

azuapricot

総合スコア2341

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

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

xx_6_6_xx

2019/08/06 04:34

ありがとうございます! それも試していて、非表示にはできるのですが、思った形にならなくて。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問