js基本打印表格

最新推荐文章于 2024-06-06 11:23:53 发布

原创最新推荐文章于 2024-06-06 11:23:53 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

笔记专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何使用CSS和JavaScript来设置表格在页面居中，并且实现每次刷新页面时表格颜色的动态变化。通过提供的CSS样式和JavaScript脚本，可以达到预期效果。

样式设置整个tsnle在页面得中间

css：

<style>
        table{
            /* 让整个table居中，显示在页面正中间 */
            margin: auto;
        }
</style>

script：

<script type="text/javascript">
    
		//用弹框内容自己控制表格的长宽和边框
        var  w = prompt("请输入表格的宽度");
        var  h = prompt("请输入表格的高度");
        var  b = prompt("请输入表格的边框");
        
        //随机生成0~255的值。
        var num1 =Math.random()*255;
        var num2 =Math.random()*255;
        var num3 =Math.random()*255;

        console.log(w,h,b)
        document.write("<table width="+w+"  height="+h+"  border="+b+" style='background:rgb("+num1+","+num2+","+num3+")'>")//背景颜色有三个数值组成（颜色由0~255），随数解决

        document.write("<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>");
        document.write("<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>");
        document.write("<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>");
        document.write("<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>");
        document.write("<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>");
        
        document.write("</table>");

</script>

效果显示如下，每次刷新会改变颜色