Webエンジニア 新人日記

Webエンジニアになりました。元々はCOBOLやらBASICやらでプログラムしてました。C言語やVisualBasicは趣味でやっていましたが、久々に現場復帰ということです。資格はエンベデッドスペシャリスト、DBスペシャリスト、ネットワークスペシャリスト、セキュリティスペシャリスト、システムアーキテクト、プロジェクトマネージャ他を所有

指定された日付が過ぎると取り消し線を引く

指定された日付以降になると取り消し線を引く

Sタグを使えばできる

<s>5/8</s>

こう書けば

5/8

日付が小刻みにあると忘れるしなにより面倒


そこで、jQueryを使って自動的に取り消し線を引かせてみる

例えば、tableを作っておいてtd属性毎に日付けを設定するには

$(function(){
    $(".hantei-date tr>td").each(function(){
          if(new Date() > new Date($(this).attr("rel"))){
              $(this).addClass("linethrough");
          };
    });
});

を予め宣言しておく。


htmlでは

<table class="hantei-date">
<tr>
    <td rel="2016/5/8">5/8</td><td></td>
    <td rel="2016/5/15">15</td><td></td>
    <td rel="2016/5/22">22</td><td></td>
    <td rel="2016/5/29">29</td><td></td>
    <td rel="2016/6/5">6/5</td><td></td>
    <td rel="2016/6/12">6/12</td><td></td>
    <td rel="2016/6/19">19</td><td></td>
    <td rel="2016/7/3">7/3</td><td></td>
    <td rel="2016/7/10">10</td><td></td>
    <td rel="2016/7/17">17</td><td></td>
</tr></table>

スタイルシートには、予め

.linethrough{
    text-decoration: line-through;
}

relには、日付を指定する。tableの構成を変えるならセレクタを考えること。