JavaScript案例七：简单生成表格

JavaScript简单生成表格，巩固基础知识点。。。

<!DOCTYPE html>

<html>

  <head>

    <title>JavaScript简单生成表格</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" >

        function create()

        {

            var h=document.getElementById("t1").value;

            var l=document.getElementById("t2").value;

            var table="<table border='1' bordercolor='red'>";

            for(var i=0;i<h;i++)

            {

                table+="<tr>";

                for(var j=0;j<l;j++)

                    table+="<td>詹姆斯</td>";

                table+="</tr>";

            }

            table+="</table>"

            document.getElementById("div1").innerHTML=table;

        }

    </script>

  </head>

  <body>

      行：<input type="text" id="t1"/>&nbsp;

      列：<input type="text" id="t2"/><br><br>

      <input type="button" value="生成" onclick="create();">

      <div id="div1"></div>

  </body>

</html>

运行示意：

aaarticlea/png;base64,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" alt="" />

JavaScript案例七：简单生成表格的更多相关文章

JavaScript基础7——动态生成表格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Js--动态生成表格
<div> <h1>动态生成表格</h1> <div id="table1"> 行 ...
javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
JavaScript中动态生成表格
动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5 ...
Javascript实现前端简单路由
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...
js动态生成表格
动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行 ...
在Linux下如何使用GCC编译程序、简单生成静态库及动态库
最近在编写的一个Apache kafka 的C/C++客户端,,在看他写的 example中,他的编译是用librdkafka++.a和librdkafka.a 静态库编译的,,,而我们这 ...
[转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
（转载）PHP 动态生成表格
(转载)http://hi.baidu.com/shawns/item/c7d51f351c6a0482b711dba6 提要:PHP能够高效地生成HTML代码,其中,动态生成表格是实际应用中经常碰到 ...

随机推荐

[整] JavaScript m选n组合算法
01转换法: 思路是开一个数组,其下标表示1到m个数,数组元素的值为1表示其下标代表的数被选中,为0则没选中. 首先初始化,将数组前n个元素置1,表示第一个组合为前n个数. 然后从左到右扫描数组元素值 ...
Nginx 开启PATHINFO支持ThinkPHP框架实例
ThinkPHP支持通过PATHINFO和URL rewrite的方式来提供友好的URL,只需要在配置文件中设置 'URL_MODEL' => 2 即可.在Apache下只需要开启mod_rew ...
PHP程序员，因该养成 7 个面向对象的好习惯
在 PHP 编程早期,PHP 代码在本质上是限于面向过程的.过程代码的特征在于使用过程构建应用程序块.过程通过允许过程之间的调用提供某种程度的重用. 但是,没有面向对象的语言构造,程序员仍然可以把 ...
第16章使用Squid部署代理缓存服务
章节概述: 本章节从代理缓存服务的工作原理开始讲起,让读者能够清晰理解正向代理(普通模式.透明模式)与反向代理的作用. 正确的使用Squid服务程序部署代理缓存服务可以有效提升访问静态资源的效率,降低 ...
mongo数据库的导入导出
http://www.iwangzheng.com/ [root@a02]$show dbs; changhong_tv_cms 0.078GB [root@a02]$ mongodump -d ch ...
在link的url里新增参数
(文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) <%= link_to image_tag("/images/icons/aaa. ...
java对象与json对象间的相互转换
工程中所需的jar包,因为在网上不太好找,所以我将它放到我的网盘里了,如有需要随便下载. 点击下载 1.简单的解析json字符串首先将json字符串转换为json对象,然后再解析json对象,过程如 ...
HDOJ 2095
find your present (2) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/1024 K (Java/Oth ...
在CentOS 6.4中编译安装gcc 4.8.1
在CentOS 6.4中编译安装gcc 4.8.1 分类: C/C++ Linux/Unix2013-11-28 21:02 1877人阅读评论(0) 收藏举报原文链接:http://www.c ...
PHP日期格式转时间戳
PHP 提供了函数可以方便的将各种形式的日期转换为时间戳,该类函数主要是: strtotime():将任何英文文本的日期时间描述解析为时间戳. mktime():从日期取得时间戳. strtotime ...

JavaScript案例七：简单生成表格

JavaScript案例七：简单生成表格的更多相关文章

随机推荐

热门专题