编程 Javascript

基于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实现动态创建表格和增加表格行数

- Author -

程序员小菜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

window.onload 加载完毕的问题及解决方案（上）

Jul 09 Javascript

jQuery学习5 jQuery事件模型

Feb 07 Javascript

如何正确使用javascript 来进行我们的程序开发

Jun 23 Javascript

利用Angularjs中模块ui-route管理状态的方法

Dec 27 Javascript

jquery代码规范让代码越来越好看

Feb 03 Javascript

JS中的多态实例详解

Oct 15 Javascript

关于angularJs清除浏览器缓存的方法

Nov 28 Javascript

Node错误处理笔记之挖坑系列教程

Jun 05 Javascript

详解Vue中数组和对象更改后视图不刷新的问题

Sep 21 Javascript

Node.js Stream ondata触发时机与顺序的探索

Mar 08 Javascript

vue指令v-html使用过滤器filters功能实例

Oct 25 Javascript

vue项目中锚点定位替代方式

Nov 13 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