用 javascript 來排表格

用 HTML 的 TABLE 標籤來作表格，偶而會遇到一個問題：當表格輸入後，可能需要增加項目或將四個直行，改成五個直行。如果表格很大，就會很辛苦。如果能用 javascript 寫一個程式，隨時可改成不同的直行數，就可以過的很快樂了。

下面的 javascript 程式，可以將你的資料，以表格的方式顯示。你可以免費使用這個程式，並且改成符合你需要的格式。

使用方法：

1. 將你的資料輸入 TEXTAREA 標籤之間，也就是用你的資料取代『項目 1』等等。每一個項目之間要隔一個空白行。
2. 修改 script 中的 TBcols，改成你要的直行數即可。

<style type='text/css'> table.TBdsp td {color:white;background:#448844} </style> <!-- 將你的表格資料放在 DIV 標籤之間。每一個項目用一個空白行隔開。 --> <!-- 在下面的 <scipt> 中，只要修改 TBcols 成為你要的直行數即可。 --> <textarea id='TBdata' style='display:none'> 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 項目 8 項目 9 項目 10 項目 11 項目 12 項目 13 項目 14 </ textarea> <table class='TBdsp'> <caption>表格的標題</caption> <tbody> <script type='text/javascript'> var TBcols=4; //你可以在此修改表格的直行數。 var DTlist; var oTD=document.getElementById('TBdata'); if(oTD.textContent != undefined) DTlist=oTD.textContent.split("\n\n"); //FF newline twice else DTlist=oTD.innerText.split("\r\n\r\n"); //IE newline twice. for(var i=0; i < DTlist.length; i++) { if((i%TBcols)==0) document.write('<tr>'); document.write('<td>'+DTlist[i]+'</td>'); } </script> </tbody> </table>

顯示結果： 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 項目 8 項目 9 項目 10 項目 11 項目 12 項目 13 項目 14

表格的標題

項目 1	項目 2	項目 3	項目 4
項目 5	項目 6	項目 7	項目 8
項目 9	項目 10	項目 11	項目 12
項目 13	項目 14

程式說明：

程式使用的 HTML 標籤

標籤	說明
<style type='text/css'> table.TBdsp td {color:white; background:#448844} </style>	style 用來宣告顯示風格。在此宣告一個 類別（class） table.TBdsp，此類別只用在 table 標籤。 並且宣告在此 table 中的 TD 標籤，其字的顏色為白色（color:white），背景色為暗綠色（ background:#448844 ）。
<textarea id='TBdata' style='display:none' > </textarea >	宣告一塊文字區塊，其 識別名 為 TBdata。此區塊用來放你的資料。又此區塊設定為 display:none，此區塊將不會顯示。
<table class='TBdsp' > </table>	以表格方式顯示資料。其類別（class）設為 TBdsp。
<caption > </caption>	表格的標題。
<tbody > </tbody>	表格的主體部份。你的資料將顯示於此。
<script type='text/javascript' > </script >	javascript 程式區塊。

javascript 程式

指令	說明
var TBcols=4; //你可以在此修改表格的直行數。	TBcols 存放直行數。
var DTlist;	宣告變數。
var oTD = document.getElementById( 'TBdata' );	取得識別名 為 TBdata 的物件（textarea）的指標。
if(oTD.textContent != undefined) DTlist= oTD.textContent.split( "\n\n"); //FF newline twice else DTlist= oTD.innerText.split( "\r\n\r\n"); //IE newline twice.	檢查物件內文的屬性名稱，不同瀏覽器其屬性名稱不同。將內文分切成項目，其分隔符號，在 ie 為 \r\n\r\n，其它瀏覽器用 \n\n。
for(var i=0; i < DTlist.length; i++)	宣告一個迴路， i=0 為起始值，DTlist.length 為最大值。
if((i%TBcols)==0) document.write( '<tr>' );	檢查變數 i，每隔 TBcols 個資料項目，就輸出一個 tr 標籤。
document.write('<td>' + DTlist[i]+'</td>');	輸出資料的個別項目。