基于JavaScript实现动态创建表格和增加表格行数


Posted in Javascript onDecember 20, 2015

在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍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实现动态创建表格和增加表格行数的相关代码,希望大家喜欢。

Javascript 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
vue自动化表单实例分析
May 06 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
深入浅析React中diff算法
May 19 Javascript
原生js页面滚动延迟加载图片
Dec 20 #Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
图解js图片轮播效果
Dec 20 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 #Javascript
You might like
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
JS实现留言板功能
2017/06/17 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
python中Apriori算法实现讲解
2017/12/10 Python
python 杀死自身进程的实现方法
2019/07/01 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
人事部主管岗位职责
2013/12/26 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
欢迎新生标语
2014/10/06 职场文书
家装电话营销开场白
2015/05/29 职场文书
张丽莉观后感
2015/06/16 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js