2013-05-07

javascript：ウィンドウのサイズに応じてtableの行数を変更する

ウィンドウをリサイズしたときに、tableの行数を自動的に変更して表示するjavascript

リサイズの検出は下記
  1. window.onresize = function(){
  2.  
  3.      ShowList();
  4.  
  5. }
  6.  

ウィンドウの幅に応じてtableの行数を変更するのは下記
  1. function ShowList() {
  2.  
  3.  col_num = Math.floor($(document).width()/450);
  4.  if (col_num < 1 ) col_num = 1;
  5.  
  6.  var html = '<table border="2" cellpadding="5">';
  7.  
  8.  var td_num = 0;
  9.     for( var i=0; i<photoset_id.length; i++ ) {
  10.  
  11.   if (td_num % col_num == 0) {
  12.    html += '<tr>';
  13.   }
  14.  
  15.    html += '<td class="td_img"><a href="******">'
  16.    if (thum) {
  17.     html += '<img src="****">'
  18.    }
  19.    html += '</a></td>';
  20.  
  21.    html += '<td class="td_txt"><a href="*****">*****</a>';
  22.  
  23.    html += '<br/>'
  24.  
  25.    if (td_num % col_num == col_num-1) {
  26.     html += '</tr>';
  27.    }
  28.  
  29.    td_num++;
  30.  
  31.   }
  32.  
  33.   if (td_num % col_num == col_num-1) {
  34.    html += '<td class="td_img"><br/></td>';
  35.    html += '<td class="td_txt"><br/></td>';
  36.    html += '</tr>';
  37.   }
  38.  
  39.  html += '</table>';
  40.  document.getElementById("list").innerHTML = html;
  41.  
  42. }
  43.  


参考にしたページ

切り捨て
テーブルの幅をブラウザの幅(内側)に合わせる
ｊQuery - width()


以上
投稿者 時刻: