基于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实现动态创建表格和增加表格行数的相关代码，希望大家喜欢。

赞 (0)

相关推荐

  • 用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

  • 用原生js统计文本行数的简单示例

    前言 在开发的时候会遇到这种情况,只显示两行,如果超过两行,则显示一个"显示更多"的按钮,点击按钮来显示剩余行的内容.有个 jQuery 的插件 loadingDots 专门实现了这个功能.不过今天这里我们要用原生的Javascript来实现,要实现这个需求,最关键的是要确定这个容器内文本的行数,得到行数后,修改元素高度,并确定是否显示加载按钮. window.getComputedStyle() 要使用原生 JavaScript 代码获取一个元素的各个 style 属性,使用 win

  • js获取表格的行数和列数的方法

    如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: <table width="100%" border="1" cellspacing="0" cellpadding="0" id="example_table"> <tr> <td> </td> <td> </td> <td> </

  • 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动态生成指定行数的表格

    js动态生成指定行数的表格

    下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 复制代码 代码如下: <table> <tr> <td>动态生成表格</td> <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td&g

  • javascript实现输出指定行数正方形图案的方法

    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

  • 利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

    原理就是循环获取网页上的控件,然后设置disabled 属性为true. 代码如下: 复制代码 代码如下: <script type="text/javascript">    var nodeList = document.getElementsByTagName("input");    for (var i = 0; i < nodeList.length; i++) {        nodeList[i].disabled = true;

  • 用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

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

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • 基于JavaScript实现动态雨滴特效

    基于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表格

    两种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中获取出错代码所在文件及行数的代码

    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动态地添加和删除样式表

随机推荐