2012-02-29 18 views
0

値の配列を使用して動的にhtmlテーブルを構築しています。私は最初の列から始めて、このテーブルを作成したい、右に移動します。例えば、私は配列を持っている:私は取得するには、倍のIループMath.ceil(array.length/number_of_columns)数を私が使用したい列の数を定義した場合動的テーブル構築

a c e 
b d f 

['a', 'b', 'c', 'd', 'e', 'f'] 

私のテーブルは次のようになります。各行。そのループの中で、私は各列を得るためにループnumber_of_columns回回ります。配列の値を調べるには、この式を使用する必要があります:array_index = (row_column_number * number_of_rows) + row_number。それは正しい式ですか?また、これを行う最善の方法ですか?

+0

あなたのデータは配列ではありません。これは '{0: 'a'、1: 'b'、2: 'c'、3: 'd'、4: 'e'、5: 'f' a '、1:' b '、2:' c '、3:' d '、4:' e '、5:' f '} 'それはオブジェクトであるはずですか? – jfriend00

+0

'float:left;'でdivを作成するのではなく、テーブルを作成する必要がありますか? – Aprillion

+0

@ jfriend00申し訳ありませんが、私は配列でそれを書いていない、私はインデックスを表示しようとしていた。私は値の前にインデックスを書くことができるPHPの面で考えていたと思います。 – LordZardeck

答えて

0

本当に正しいですか?これは、コアJavaスクリプトでこれを行う唯一の(最良の)方法です。あなたのために必要なテストJavaスクリプトコードを以下で見つけてください。

<html> 
<head> 
<style> .mytable tr td{ margin:10px;border:1px dotted green;width:100px;} 
</style> 
<script type="text/javascript"> 
function onload(){  
     var arr=['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k']; 
     var number_of_columns=3; // enter number of columns 
     var nrRows=Math.ceil(arr.length/number_of_columns);  
     var root=document.getElementById('mydiv'); 
     var tab=document.createElement('table'); 
     tab.className="mytable"; 
     var tbo=document.createElement('tbody'); 
     var row, cell; 
     for(var i=0;i<nrRows;i++){ 
      row=document.createElement('tr'); 
      for(var j=0;j<number_of_columns;j++){ 
       cell=document.createElement('td'); 
       cell.appendChild(document.createTextNode(arr[i*number_of_columns+j])); 
       row.appendChild(cell); 
      } 
      tbo.appendChild(row); 

     } 
     tab.appendChild(tbo); 
     root.appendChild(tab); 
} 
window.onload=onload; 
</script> 
</head> 
<body> 
<div id="mydiv"> 
</div> 
</body> 
</html> 
+0

申し訳ありません。ありがとう! – LordZardeck

関連する問題