基于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 相关文章推荐
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
js比较日期大小的方法
May 12 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python如何删除文件中重复的字段
2019/07/16 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
会计求职自荐信
2014/06/20 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
检讨书格式
2015/01/23 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang