iT邦幫忙

0

[php日曆] jquery 變更某日期字串,增加超連結(array)

各位好:
如果目前用php產生一個日曆列表,並增加相對應id

          <table border="0">
            <tr>
              <th>日</th>
              <th>一</th>
              <th>二</th>
              <th>三</th>
              <th>四</th>
              <th>五</th>
              <th>六</th>
            </tr>
            <tr>
              <td align="center" id="d_1">1</td>
              <td align="center" id="d_2">2</td>
              <td align="center" id="d_3">3</td>
              <td align="center" id="d_4">4</td>
              <td align="center" id="d_5">5</td>
              <td align="center" id="d_6">6</td>
              <td align="center" id="d_7" class="date-active"><a href=day.php?day=7>7</a></td>
            </tr>
              <td align="center" id="d_8">8</td>
              <td align="center" id="d_9">9</td>
              <td align="center" id="d_10">10</td>
              <td align="center" id="d_11">11</td>
              <td align="center" id="d_12">12</td>
              <td align="center" id="d_13">13</td>
              <td align="center" id="d_14">14</td>
            </tr>

...略

          </table>

並使用mysql取出該月的資料存成陣列,
例如:
day_ary[]='2014/1/5';
day_ary[]='2014/1/7';
day_ary[]='2014/1/8';

表示在5,7,8都有資料存在,可以有超連結,
請問如何經由jquery將這些陣列資料,增加那些日期的超連結跟更改clsaa狀態?
如同範例HTML的7號那樣?

本來7號的HTML是這樣,
<td align="center" id="d_7">7</td>

但是經由陣列判斷有該資料,則透過JQ變成
<td align="center" id="d_7" class="date-active"><a href=day.php?day=7>7</a></td>

1 個回答

8
wordsmith
iT邦高手 1 級 ‧ 2014-01-11 20:57:11
最佳解答

有個疑問是,為什麼不能直接用php就直接處理完,而一定要用jQuery呢?聽起來直接用PHP就可以處理掉了。

OK,就先當有非用jQuery的理由,一般使用JS來動態處理的模式,是PHP提供一個api,例如說,有支PHP叫做 get_date.php,會吐出JSON的資料,告知哪幾個日期有連結,例如:

&lt;pre class="c" name="code">{"dateWithLink":[5,7,8]}

這時,jQuery就可以用ajax的方法:

&lt;pre class="c" name="code">$.getJSON("get_date.php",function(data){
     var list = data.dataWithLink;
     $.each(list,function(i,v){
         var link = '&lt;a href="day.php?day='+v+'" >'+v+'&lt;/a>';
         var target = $("d_"+v);    
          target.html(link);
          target.addClass("date-active");
     })
});

取得日期,並加以處理。

當然上面的程式碼只是說明概念,像是月份的問題上面是先不考慮的。

喜歡拍手筆記

我要發表回答

立即登入回答