使用js在页面中绘制表格核心代码

1.先写一个<table>，中间放入<tbody>，但是<tbogy>什么也不加
 
如何使用js在页面中绘制表格

2.在js中写入方法，绘制表格
 
如何使用js在页面中绘制表格

其核心语句就是：

var row=document.createElement_x("tr"); 就是创建行

var cell=document.createElement_x("td"); 就是创建列

cell.appendChild(document.createTextNode(message)); 就是向列的每一个小格添加子节点和内容（必写）

row.appendChild(cell); 就是将每一列（一个小格）加到行中

document.getElementByIdx_x("tbodyname").appendChild(row); 就是讲每一行添加到tbody中

最后调用此方法就行。

赞 (0)

相关推荐

  • 纯JS 绘制数学函数

    绘图对象Plot,包含了JS画点,JS画线,JS画正弦sin,JS画余弦cos,tan,圆,多边形. 可设置原点位置,画笔颜色,画笔粗细,坐标线颜色. 其实原理很简单,用长1px宽1px的div模拟点,由点及线,由线及面. 贴上来权当相互学习,以免JS新手觉得js画图是多神秘的事情. JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /**

  • js+html5实现canvas绘制圆形图案的方法

    本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • js+html5实现canvas绘制镂空字体文本的方法

    本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s

  • js+html5实现canvas绘制简单矩形的方法

    本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • js+html5通过canvas指定开始和结束点绘制线条的方法

    本文实例讲述了js+html5通过canvas指定开始和结束点绘制线条的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does n

  • js绘制圆形和矩形的方法

    js绘制圆形和矩形的方法

    本文实例讲述了js绘制圆形和矩形的方法.分享给大家供大家参考.具体如下: 这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形.半径.正圆.矩形.正方形这几个选项.或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心. 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形</title> <style&

  • js+html5绘制图片到canvas的方法

    本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor

  • 使用js在页面中绘制表格核心代码

    使用js在页面中绘制表格核心代码

    1.先写一个<table>,中间放入<tbody>,但是<tbogy>什么也不加  如何使用js在页面中绘制表格 2.在js中写入方法,绘制表格  如何使用js在页面中绘制表格 其核心语句就是: var row=document.createElement_x("tr"); 就是创建行 var cell=document.createElement_x("td"); 就是创建列 cell.appendChild(document.

  • 利用JS屏蔽页面中的Enter按键提交表单的方法

    如在设置了JS代码响应<p>标签的Enter按键触发事件时,根据冒泡型事件原则该事件会一直传到<from>表单处,并将表单提交.这不是我们想要的效果,我们可以设置如下代码来加以屏蔽: $(document).keydown(function(event){ switch(event.keyCode){ case 13:return false; } }); 但是,如果页面中有按钮时在Opera浏览器中同样会提交表单,这是因为按钮在生成的HTML代码中是submit类型的,解决办法是

  • JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

    JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

    本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法.分享给大家供大家参考,具体如下: 这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能: <script type="text/JavaScript" language="javascript"> <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function

  • JS检测页面中哪个HTML标签触发点击事件的方法

    本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要

  • Angular.js与Bootstrap相结合实现表格分页代码

    Angular.js与Bootstrap相结合实现表格分页代码

    先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

  • 浅析JS获取url中的参数实例代码

    js获取url中的参数代码如下所示,代码简单易懂,附有注释,写的不好还请见谅! function UrlSearch() { var name, value; var str = location.href; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&&

  • 基于JS实现页面悬浮框的实例代码

    当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35

  • js判断页面中是否有指定控件的简单实例

    if (document.getElementById('show_pic')!=null){document.getElementById('show_pic').src=this.value;} show_pic是页面中的一个图片控件,我们首先要保证这个控件存在于页面上,才能对其进行操作,不然JS就会出现错误,所以用这种方式进行了判断,我听网友说,JS中还有一个函数,可以判断对象是否存在,可惜我没有找到.

  • js父页面中使用子页面的方法

    iframe是非常常用的一个html元素,如果在父页面中使用子页面的方法应该怎么写呢,下面就做一下简单的介绍. 一.父页面代码 <html> <head> <meta charset=" gb2312"> <title>父页面</title> <script type="text/javascript"> function parentFunction() { alert('function i

  • jQuery UI Grid 模态框中的表格实例代码

    jQuery UI Grid 模态框中的表格实例代码

    在弹出的模态框中使用表格. 在某些情况下,特别是 bootstrap modal,可能会出现表格渲染宽度过小或有时显示不完全.会误认为是由于 bootstrap modal 的动画渲染导致表格渲染时的可用空间不如预期.可以通过调用handleWindowResize来纠正.动画渲染的时间不好确定,所以一般推荐使用$interval,在模态框打开后的5秒内每隔500ms循环调用. 从某种意义上说,这类似于自动调整大小的功能,但它只在模态框开启后的短时间内完成. 代码: index.html <!d

随机推荐