基于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 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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时间格式控制符对照表分享
2013/07/23 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
python删除过期文件的方法
2015/05/29 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python实现剪切功能
2019/01/23 Python
python实现扫描ip地址的小程序
2019/04/16 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
免职证明样本
2014/10/23 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电