基于JavaScript实现动态创建表格和增加表格行数
在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能。对此感兴趣的朋友可以参考一下代码:
js代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head> <body> <script type="text/javascript"> var n = 0; function showTable(len) { wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">'); for (i=0;i<len;i++) { if (parseInt(i%2)==1) { bg = '#F4FAC7'; } else { bg = 'white'; } wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>'); } wi('</tbody></table><br />'); wi('<input type="button" value="Add" id="add" />'); }</P> <P>function wi(str) { return document.write(str); } showTable(10); var add = document.getElementById("add"); add.onclick = function() { n = n+1; if (n%2==0) { bg = '#F4FAC7'; } else { bg = 'white'; } var table = document.getElementById("table"); var tr = document.createElement("tr"); tr.bgColor = bg; var td = document.createElement("td"); td.innerHTML = '第'+(10+n)+'行'; tr.appendChild(td); table.appendChild(tr); } </script> </body> </html>
以上内容是基于JavaScript实现动态创建表格和增加表格行数的相关代码,希望大家喜欢。
相关推荐
-
js获取表格的行数和列数的方法
如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: <table width="100%" border="1" cellspacing="0" cellpadding="0" id="example_table"> <tr> <td> </td> <td> </td> <td> </
-
用原生js统计文本行数的简单示例
前言 在开发的时候会遇到这种情况,只显示两行,如果超过两行,则显示一个"显示更多"的按钮,点击按钮来显示剩余行的内容.有个 jQuery 的插件 loadingDots 专门实现了这个功能.不过今天这里我们要用原生的Javascript来实现,要实现这个需求,最关键的是要确定这个容器内文本的行数,得到行数后,修改元素高度,并确定是否显示加载按钮. window.getComputedStyle() 要使用原生 JavaScript 代码获取一个元素的各个 style 属性,使用 win
-
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
原理就是循环获取网页上的控件,然后设置disabled 属性为true. 代码如下: 复制代码 代码如下: <script type="text/javascript"> var nodeList = document.getElementsByTagName("input"); for (var i = 0; i < nodeList.length; i++) { nodeList[i].disabled = true;
-
javascript实现输出指定行数正方形图案的方法
本文实例讲述了javascript实现输出指定行数正方形图案的方法.分享给大家供大家参考.具体如下: javascript实现输出指定行数的正方形图案:点击生成图案,会有2个提示框,1,输入图案的组成字符,只能是1个字符哦2,输入正方形行数,路过大于10,会设置为10行数 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd
-
php实现格式化多行文本为Js可用格式
js里现在存写模板的场景好多,如:弹框类的html代码模板等,js不支持换行的长文本写法,必需要一行行的加起来,如: 复制代码 代码如下: var content = '<div>row 1</div>' + '<div>row 2</div>'; 而不可以写成: 复制代码 代码如下: var content = '<div> row 1</div> <div>row2 </div> '; 于是小加工一php小
-
用js实现计算代码行数的简单方法附代码
一段代码可能有几十行,上千个字符,统计其行数可以先把代码字符串化为数组,再返回该数组的长度即可. 传统做法: <textarea name="abc"> 123456 789 </textarea> <script type="text/javascript"> var counter = 0; var str = abc.value; for(i=0; i<str.length; i++) { if(str.sub
-
js动态生成指定行数的表格
下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 复制代码 代码如下: <table> <tr> <td>动态生成表格</td> <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td&g
-
用JS获得表格当前行数的代码
table1 table2 table3 table4 table5 table6 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 无标题文档 document.body.onclick=function(e){ e=e|| window.event; var obj=e.target || e.srcElement; if(obj.tagName=="TD"){ obj=obj.parentNode; } alert(obj.rowInde
-
基于JavaScript实现动态创建表格和增加表格行数
在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>
-
基于JavaScript实现动态雨滴特效
目录 演示 技术栈 源码 设置画布 js部分 演示 技术栈 介绍一下画布吧: HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性 它的方法挺多的大家可以去搜一下我就说几个常用的: 源码 设置画布 <canvas id="canvas" style="position:
-
javascript元素动态创建实现方法
本文实例讲述了javascript元素动态创建实现方法.分享给大家供大家参考.具体分析如下: document.write只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e
-
JavaScript如何动态创建table表格
两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下 方法一:最原始的方法,创建一一元素 var a1=document.createElement("table"); var a2=document.createElement("tbody"); var a3=document.createElement("tr"); var a4=document.createElement("td"); //开
-
基于JavaScript实现动态添加删除表格的行
又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t
-
jquery创建表格(自动增加表格)代码分享
复制代码 代码如下: <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width" /><title>jQuery 表格自动增加</title&
-
基于Jquery的动态创建DOM元素的代码
动态创建div: 复制代码 代码如下: $(function(){ $("<div>",{ id: 'test', text: 'this is a test', "class": "test", click: function(){ $(this).toggleClass('test'); } }).appendTo("body"); }) 动态创建input: 复制代码 代码如下: $(function(){
-
Javascript中获取出错代码所在文件及行数的代码
原先使用的是try-catch的方式,在catch语句中,我们会收到一个Error对象(我们也可以抛出一个自定义异常对象).Firefox中的Error对象拥有如下属性: message -- 错误提示信息 fileName -- 表示出错代码所在文件 lineNumber -- 出错代码所在行数 stack -- 出错堆栈信息 name -- 异常对象名/类型 但是在IE下,Error对象只有如下属性: name -- 异常对象名/类型,和Firefox中显示的名称可能不同 message -
-
基于jquery的动态创建表格的插件
废话少说直接进入主题, 表格功能: 1.添加 2.删除 3.获取值 4.动态填充数据 5.动态设置焦点 6.键盘左右上下键控制单元格焦点 7.单元格添加正则验证功能 WebForm4.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %&
-
JavaScript实现动态创建CSS样式规则方案
现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing)来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等. 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表
随机推荐
- SSH 登录工具常用命令
- 快速解决Canvas.toDataURL 图片跨域的问题
- 在PHP模板引擎smarty生成随机数的方法和math函数详解
- php截取字符串函数分享
- 深入理解Python中字典的键的使用
- javascript中attribute和property的区别详解
- python实现根据用户输入从电影网站获取影片信息的方法
- Spring MVC中上传文件实例
- Mysql中Identity 详细介绍
- jQuery操作select的实例代码
- 基于Jquery的淡入淡出的特效基础练习
- 纯原生js实现table表格的增删
- javascript闭包入门示例
- Java 解决死锁的方法实例详解
- apache配置php实现单一入口方法
- java两种单例模式用法分析
- 同事关系嘴巴要紧肚量要大
- Nginx实现非套路镜像站的踩坑记录
- 浅谈mysql 系统用户最大文件打开数限制
- Python提取转移文件夹内所有.jpg文件并查看每一帧的方法