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，如需转载请自行联系原作者