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和HTML5上传图片之前实现预览效果
一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...
upc.2219: A^X mod P(打表 && 超越快速幂（in some ways)）
2219: A^X mod P Time Limit: 5 Sec Memory Limit: 128 MB Submit: 417 Solved: 68 [Submit][Status][Web ...
畅通工程再续（MST）
畅通工程再续 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Statu ...
ThinkPHP 分页实现
TP3.2框架手册,有一个数据分页,不过每次都要写太多的代码,还有中文设置等有些麻烦,做为程序开发者,有必要整理下: O.先看效果图一.分页方法 /** * TODO 基础分页的相同代码封装,使前台 ...
UITableView 委托方法总结
http://blog.sina.com.cn/s/blog_7b9d64af01019x3t.html 总结: UITableViewDelegate row: heightForRow hea ...
Aptana插件安装到eclipse和myeclipse的详细过程
刚开始学习Jquery,为了搭建好的环境是很重要的,所以我尝试了很多方式,下面之一. 一.要下载好Aptana 插件官网: http://update1.aptana.org/studio/3.2/ ...
PHP中通过加号合并数组
通常,我们合并多个数组用的是array_merge()函数,其实,PHP手册中关于数组操作符的介绍给了我们更简单的方法,那就是"+"号,看看下面的例子就明白了(详细了解) 代码: ...
vim实用技巧
<1> 删除空格: :% s/ //gi #正则为一个空格,替换为空,全局匹配. <2> 删除空行: :g /^\n*$/ d #g为global 正则为:行开始+换 ...
Linux下 ntp 时间同步服务ntpd 出现 the NTP socket is in use, exiting 解决
[root@EPDDB log]# [root@EPDDB log]# ntpdate 10.154.8.200 6 Sep 09:35:09 ntpdate[30210]: the NTP sock ...
dhcp原理、安装、相关命令、疑惑
转自: http://blog.sina.com.cn/s/blog_642e41c20101tct3.html

JavaScript案例七：简单生成表格

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

随机推荐

热门专题