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代码,其中,动态生成表格是实际应用中经常碰到 ...

随机推荐

SVM算法入门
转自:http://blog.csdn.net/yangliuy/article/details/7316496SVM入门(一)至(三)Refresh 按:之前的文章重新汇编一下,修改了一些错误和不当 ...
PHP函数之日期时间函数date()使用详解
date()函数是我们在php开发中常碰到并且会使用到的一个日期函数,下面我来给大家介绍date()函数的一些基本扮靓和方法,有需要了解的朋友可进入参考日期时间函数是PHP 的核心组成部分.无需 ...
Gulp，比Grunt更好用的前端构建工具
Gulp, 比Grunt更好用的前端构建工具本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...
thinkphp中where方法
今天来给大家讲下查询最常用但也是最复杂的where方法,where方法也属于模型类的连贯操作方法之一,主要用于查询和操作条件的设置.where方法的用法是ThinkPHP查询语言的精髓,也是Think ...
[Effective JavaScript 笔记]第22条：使用arguments创建可变参数的函数
第21条讲述使用可变参数的函数average.该函数可处理任意数量的参数并返回这些参数的平均值. 如何创建可变参数的函数 1.实现固定元数的函数书上的版本 function averageOfArr ...
[Effective JavaScript 笔记]第6章：库和API设计--个人总结
前言又到了一章的总结,这章里的内容.是把我从一个代码的使用者,如何换位成一个代码的编写者.如何让别人用自己的代码更容易,不用去注意太多的无用细节,不用记住冗长的函数名.在使用API时怎样避免使用者会 ...
iATKOS v7硬盘安装教程(硬盘助手+变色龙安装版)
这是作者:Tong 写的一篇安装教程首先感谢:wowpc制作的变色龙安装版.iATKOS作者以及硬盘安装助手作者前言:现在时代在进步,系统同样也在进步,在以前要在PC上整个Mac是很痛苦的事情,就 ...
C语言课程1——Hello World
相信大家看了第一篇文章后,都信心满满,后边咱来点实际吧,上代码,经典之作:Hello World. 首先,不知道大家用的什么工具,VC6.0(太老了,强烈建议不用),VS,或是其他~ Hello Wo ...
【JavaScript】ReactJS&NodeJS了解资料
ReactJS: GitHub:https://github.com/facebook/react React 入门实例教程:http://www.ruanyifeng.com/blog/2015/0 ...
FileOutputStream与FileInputStream互相转换
List<InstorageNoticeDto> noticeList = null; FileOutputStream fos = null; FileInputStream is = ...

JavaScript案例七：简单生成表格

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

随机推荐

热门专题