JS制作表格

    在實際項目開發中，我們需要的表格的行，列，背景色，都可能是動态的，是以利用JS做成一個函數，在我們需要的地方直接調用這個函數，是一個非常好的方法，如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<code>&lt;!DOCTYPE html PUBLIC </code><code>"-//W3C//DTD XHTML 1.0 Transitional//EN"</code> <code>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</code><code>&gt;</code>

<code>&lt;html xmlns=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>&lt;meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code> <code>/&gt;</code>

<code>&lt;title&gt;動态制作表格&lt;/title&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>table(8,2,</code><code>"red"</code><code>);</code>

<code>        </code><code>function</code> <code>table(row,col,color){</code>

<code>            </code><code>document.write(</code><code>'&lt;table border="1" width="800" align="center"&gt;'</code><code>);</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;row;i++){</code>

<code>                </code><code>if</code><code>(i%2==0)</code>

<code>                </code><code>var</code> <code>bg=color;</code>

<code>                </code><code>else</code>

<code>                </code><code>var</code> <code>bg=</code><code>""</code><code>;</code>

<code>                </code><code>document.write(</code><code>'&lt;tr bgcolor="'</code><code>+bg+</code><code>'"&gt;'</code><code>);</code>

<code>                    </code><code>for</code><code>(</code><code>var</code> <code>j=1;j&lt;=col;j++)</code>

<code>                    </code><code>document.write(</code><code>'&lt;td&gt;'</code><code>+(i*row+col)+</code><code>'&lt;/td&gt;'</code><code>);</code>

<code>                    </code><code>document.write(</code><code>'&lt;/tr&gt;'</code><code>);</code>

<code>            </code><code>}</code>

<code>                </code><code>document.write(</code><code>'&lt;/table&gt;'</code><code>);</code>

<code>    </code><code>&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

解釋:

table(8,2,"red");傳進來就是實際參數，可以動态傳進來

table(row,col,color)接受的就是形參

這樣，不論是行，列，背景色，寬度，高度等都已作為一個形參，傳進來！

OK！

本文轉自 小夜的傳說 51CTO部落格，原文連結：http://blog.51cto.com/1936625305/1432146，如需轉載請自行聯系原作者