実現したいこと
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を変更するしかないのでしょうか。。。。
追記します(実際のコードです)
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 }
回答3件
あなたの回答
tips
プレビュー