4月 | 2019 | Web開発オフィス後藤

jQueryでTable要素にappendするときずれた位置に表示されてしまったのでまとめ

$(document).ready(function(){
    $('#foo').append('<tr>');
    $('#foo').append('<td>');
    $('#foo').append('ずれた位置に表示される');
    $('#foo').append('</td>');
    $('#foo').append('</tr>');
});

最初のtrタグをappendしたタイミングで/trされる。
tdタグについても同じくtdタグをappendしたタイミングで/tdされる。
なのでHTMLでみると以下のようになる

<table id="foo">
  <tr></tr>
  <td></td>
  ずれた位置に表示される
</table>

for文などで行と列が可変の場合とても面倒だが
tableにtrをappendする
trにtdをappendする

$(document).ready(function(){
    $('#foo').append('<tr id="bar"></tr>');
    $('#bar').append('<td>この書き方が正解</td>');
});

HTMLでみると以下のようになる

<table id="foo">
  <tr id="bar">
    <td>この書き方が正解</td>
  </tr>
</table>

なおtrをappendするタイミングで/trがされるので/trは省略できる。
tdタグについても同じくtdをappendするタイミングで/tdがされるので/tdは省略できる。
しかし/タグを省略して書くとプログラマとしては失格であるので/tr/tdでしっかりと閉じよう。
誰が見ても分かりやすいコードを書くように心がけよう。

楽天のカレンダーが表示されなくなってたので自分で組みました。
1ヶ月毎に自動で切り替わる仕様です。

CSS

table.calbase_rakuten {
    background-color: #FFFFFF;
    border: 1px solid #CECECE;
    width: 100%;
    border-collapse: collapse;
    padding: 0px 0px 10px 0px;
}

table.calbase_rakuten * {
    font-size: 98%;
    color: #000000;
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
}

table.calbase_rakuten th {
    text-align: center;
}

th.caltitle_rakuten {
    font-size: 85%;
    padding: 10px 0px 0px 0px;
}

table.calframe_rakuten {
    border-collapse: collapse;
    margin: 10px 10px 0px 10px;
    table-layout: fixed;
    width: 178px;
}

table.calframe_rakuten th {
    text-align: center;
    padding: 0px 0px 3px 0px;
}

table.calframe_rakuten td {
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    width: 19px;
    height: 17px;
    text-align: center;
}

tr.weektitle_rakuten td {
    background-color: #EEEEEE;
}

td.event1day_rakuten {
    background-color: #FFC6C6 !important;
}

font.event1day_rakuten {
    color: #FFC6C6;
}

td.event2day_rakuten {
    background-color: #B5DAFF !important;
}

font.event2day_rakuten {
    color: #B5DAFF;
}

td.event3day_rakuten {
    background-color: #FEDE93 !important;
}

font.event3day_rakuten {
    color: #FEDE93;
}

table.event_rakuten {
    text-align: left;
    word-break: break-all;
    margin: 7px 10px 7px 10px;
    border-collapse: collapse;
    line-height: 120%;
    table-layout: fixed;
    width: 141px;
}

table.event_rakuten td {
    padding: 0px 0px 0px 0px;
}

table.text_rakuten {
    text-align: left;
    word-break: break-all;
    margin: 0px 10px 10px 10px;
    border-collapse: collapse;
    line-height: 120%;
    table-layout: fixed;
    width: 178px;
}

HTML

<table class="calbase_rakuten">
  <tr>
      <td align="center">
      <table>
        <tr>
          <td align="center">
            <table class="calframe_rakuten" id="forArea0">
              <tr>
                <th colspan="7"><span id="y0"></span>年<span id="m0"></span>月</th>
              </tr>
              <tr class="weektitle_rakuten">
                <td style="color:#BF0000">日</td>
                <td style="color:#000000">月</td>
                <td style="color:#000000">火</td>
                <td style="color:#000000">水</td>
                <td style="color:#000000">木</td>
                <td style="color:#000000">金</td>
                <td style="color:#1D54A7">土</td>
              </tr>
            </table>

            <table class="calframe_rakuten" id="forArea1">
              <tr>
                <th colspan="7"><span id="y1"></span>年<span id="m1"></span>月</th>
              </tr>
              <tr class="weektitle_rakuten">
                <td style="color:#BF0000">日</td>
                <td style="color:#000000">月</td>
                <td style="color:#000000">火</td>
                <td style="color:#000000">水</td>
                <td style="color:#000000">木</td>
                <td style="color:#000000">金</td>
                <td style="color:#1D54A7">土</td>
              </tr>
            </table>

          </td>
        </tr>
        <tr>
          <td colspan="2">
            <table class="event_rakuten">
              <tr><td><font class="event1day_rakuten">■</font> 休業日</td></tr>
              <tr><td><font class="event2day_rakuten">■</font> 受注・お問い合わせ業務のみ</td></tr>
              <tr><td><font class="event3day_rakuten">■</font> 発送業務のみ</td></tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <table class="text_rakuten">
              <tr><td>
                ※ご注文は24時間年中無休で受け付けております。
              </td></tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Javascript

$(document).ready(function(){
    var dt = new Date();
    var echoCount = 2;
    var holidayDates = ['2019/3/21','2019/4/29','2019/4/30','2019/5/1','2019/5/2','2019/5/3','2019/5/4','2019/5/5','2019/5/6','2019/7/15','2019/8/11','2019/8/12','2019/9/16','2019/9/23','2019/10/14','2019/10/22','2019/11/3','2019/11/4','2019/11/23'];

    for (var i = 0; i < echoCount; i++) {
	    $('#y' + i).append(dt.getFullYear());
	    $('#m' + i).append(dt.getMonth() + 1);
	    createClendar(dt, '#forArea' + i, 'row' + i);
        var nextLastDay = new Date(dt.getFullYear(), dt.getMonth()+2, 0).getDate();
        if (nextLastDay <= dt.getDate()) {
	        dt.setDate(dt.getDate() + 1);
        } else {
            dt.setMonth(dt.getMonth() + 1);
        }
	}

    function createClendar(dt, areaName, rowName) {
        var lastDay = new Date(dt.getFullYear(), dt.getMonth()+1, 0).getDate();
        var row = 0;
        var k = 0;
        var a = dt.getDay();
        var beginMonth = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
        if (beginMonth != 0) {
            var lateLastMonth = new Date(dt.getFullYear(), dt.getMonth(), 0).getDate();
            var beginMonth = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
            var i = lateLastMonth - beginMonth + 1;
            var j = 0;
            $(areaName).append('<tr id="' + rowName + row + '"></tr>');
            for (i; i <= lateLastMonth; i++) {
                $('#' + rowName + row).append('<td style="color:#CECECE">' + i + '</td>');
                j++;
            }
            for (j; j < 7; j++) {
                k++;
                if (j == 0 || j == 6) {
                    $('#' + rowName + row).append('<td style="color:#1D54A7" class="event1day_rakuten">' + k + '</td>');
                } else if (holidayDates.some(function(e) {return e == dt.getFullYear() + '/' + (dt.getMonth()+1) + '/' + k})) {
                    $('#' + rowName + row).append('<td style="color:#BF0000" class="event1day_rakuten">' + k + '</td>');
                } else {
                    $('#' + rowName + row).append('<td style="color:#000000">' + k + '</td>');
                }
            }
        }
        for (var i = 0; i < 7; i++) {
        	k++;
        	if (i == 0) {
        		row++;
    	        $(areaName).append('<tr id="' + rowName + row + '"></tr>');
        	}
        	if (i == 0 || i == 6) {
                $('#' + rowName + row).append('<td style="color:#1D54A7" class="event1day_rakuten">' + k + '</td>');
            } else if (holidayDates.some(function(e) {return e == dt.getFullYear() + '/' + (dt.getMonth()+1) + '/' + k})) {
                $('#' + rowName + row).append('<td style="color:#BF0000" class="event1day_rakuten">' + k + '</td>');
            } else {
                $('#' + rowName + row).append('<td style="color:#000000">' + k + '</td>');
            }
        	if (i == 6) {
        	    i = -1;
        	}
    	    if (k >= lastDay) {
    	    	var forCount = 7 - new Date(dt.getFullYear(), dt.getMonth(), k).getDay();
        		for (j = 1; j < forCount; j++) {
    	            $('#' + rowName + row).append('<td style="color:#CECECE">' + j + '</td>');
        		}
    	    	break;
    	    }
        }
    }
});

まとめ

祝日判定をarray.someでしているがIE11で動かなかった。

if (holidayDates.some(e) => e == '2019/4/29') {
    // ie11で動かないよ
    // でもChromeとFirefoxでは動くよ
}
if (holidayDates.some(function(e) {return e == '2019/4/29'})) {
    // ie11でも動くよ
}

オフィス後藤

月別アーカイブ: 2019年4月

jQuery Table要素にappend

jQuery 楽天カレンダー

CSS

HTML

Javascript

まとめ