javascript 动态生成表格

最新推荐文章于 2022-03-21 00:44:56 发布
最新推荐文章于 2022-03-21 00:44:56 发布
阅读量1.1k 收藏
点赞数
分类专栏： ExtJS 文章标签： javascript input xhtml html button function
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />
< title > javascript 动态生成表格 </ title >
</ head >
< body >
< form id = "form1" name = "form1" >
  < table id = "oTable" >
    < tbody id = "oTBody" >
    </ tbody >
  </ table >
  < SCRIPT LANGUAGE = "JScript" >
 
function test()
{
    var inputs=document.getElementsByTagName( "input" );
    for ( var i=0;i<inputs.length;i++)
    {
       if (inputs[i].type== "text" )
       {
           alert(inputs[i].id+ "=" +inputs[i].value);
       }
 
    }
}
 
// 接收参数 < 可修改 > ；
var rowNumbers=3; // 行；
var colNumbers=4; // 列；
 
// 设置表格属性；
var oCaption = oTable.createCaption(); // 在表格中创建空的 caption 元素；
var oTHead = oTable.createTHead(); // 在表格中创建空的 tHead 元素；
var oTFoot = oTable.createTFoot(); // 在表格中创建空的 tFoot 元素；
var oRow, oCell;
 
 
var heading = new Array();
 
/*------------- 列数 start------<head>-------*/
for ( var i=0;i<colNumbers+1;i++)
{  
    if (i==0)
    {
       heading[i]= "" ;      
    }
    else
    {
       heading[i]= "S" +(i);
    }
}
oRow = oTHead.insertRow(); // insertRow() 方法：在表格中创建新行 (tr) ，并将行添加到 rows 集合中；
 
for (k=0; k<colNumbers+1; k++)
{
    oCell = oRow.insertCell(); // insertCell() 方法： 在表格行 (tr) 中创建新单元格，并将单元格添加到 cells 集合中；
   oCell.align = "center" ;
    oCell.style.fontWeight = "bold" ;
    oCell.style.color= "#ffffff" ;
    oCell.innerHTML =heading[k];
   
 
    if (k==0)
    {
        oCell.bgColor = "#ffffff" ;
    }
    else
    {
       oCell.bgColor = "#666666" ;
    }
}
/*------------- 列数 end-------------*/
 
 
 
/*------------- 行数 start----<tbody>---------*/
var stock = new Array;
 
 
for ( var i=0;i<rowNumbers;i++)
{
    for ( var j=0;j<colNumbers;j++)
    {
       if (j==0)
       {
           stock[ "" +i+ "," +j+ "" ]= "R" +(i+1);
       }
       else
       {
           stock[ "" +i+ "," +j+ "" ]=j;
       }
 
    }
}
 
 
for (i=0; i<rowNumbers; i++)
{
  oRow = oTBody.insertRow();
  for (j=0; j<colNumbers+1; j++)
  {
    oCell = oRow.insertCell();
 
    // 背景色；
    if (j==0)
    {
        oCell.bgColor = "#999999" ;
    }
    else
    {
       oCell.bgColor = "#ffffff" ;
    }
   
    if (j==0)
    {
      oCell.innerHTML = stock[i + "," + j];
    }
    else
    {
      oCell.innerHTML = "<input type='text' id='" +stock[i+ "," +0]+ "_S" +j+ "' name='" +stock[i+ "," +0]+ "_S" +j+ "' value='' />" ;
    }
  }
}
/*------------- 行数 end-------------*/
 
/*----------------------foot start*/
oRow = oTFoot.insertRow();
oCell = oRow.insertCell();
 
oCell.innerText= "Author:maomao" ;
oCell.colSpan = colNumbers+1;
oCell.style.fontSize = "12" ;
oCell.align= "center" ;
oCell.bgColor = "ffffff" ;
 
 
oCaption.innerText = "alan.xue@ebizserve.com"
oCaption.style.fontSize = "12" ;
oCaption.align = "bottom" ;
/*----------------------foot end*/
 
 
 
function $(id) {
    return document.getElementById(id);
}
</ SCRIPT >
  < input type = "button" value = " 测试 " onclick = "javascript:test();" />
</ form >
</ body >
</ html >
 

本文出自 “霜之哀伤” 博客，请务必保留此出处http://maomao.blog.51cto.com/115985/63911

JavaAlpha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
遇到的问题要记录下来 javascript值班表
qq_45469804的博客
07-29 269
@关于javascript值班表的问题 代码如下: var weekday = [ ["值班领导:1", "值班中队长:1", "值班内勤:1", "值班民警:1"], ["值班领导:2", "值班中队长:2", "值班内勤:2", "值班民警:2"], ["值班领导:3", "值班中队长:3", "值班内勤:3"
JavaScript值班表代码
03-15
值班表代码，在网站内显示值班人员，JavaScript编写
html js 动态表格数据类型,动态生成表格.html
weixin_42507411的博客
06-07 112
Documenttable,th,tr,td {border: 1px solid #ccc;}td,th {width: 150px;padding: 5px;}.red {background-color: red;}.pink {background-color: pink;} 请输入姓名： 请输入邮箱： 请输入手机： 请输入地址：姓名邮箱手机地址var inpts = document.q...
jQuery插件注册表的返回
01-19 96
对于大家的jQuery插件开发者那里，我们有一些令人兴奋的消息要宣布。 新的jQuery插件注册网站近日正式上线。 这个新网站将取代旧插件注册表，并一直困扰着旧网站将“关于纠正了一些问题把重点”。 该网站有一个非常简单的接口，它允许插件消费者进行关键字搜索基础。 新网站是通过技术的分类，包括WordPress，Apache，MySQL和PHP，供电的Node.js和GitHub上 。 注册表本...
用js实现一个简易定时器表相关代码
m0_64449444的博客
03-21 78
<style> span{ border: 1px solid #ccc; } </style> </head> <body> <div id="cjl"> <span id="cjl1"></span> <span id="cjl2"></span> <span id="c...
JavaScript动态生成表格案例
05-23
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 ...
JavaScript动态生成表格的示例
01-18
通过JS来写动态的表格（有多少组数据，就自动创建多少行表格） 为学习和演示，采用固定的数据，不涉及调用后台数据 代码实现： HTML内容： 姓名 科目 成绩 操作 <tbody></tbody> CSS内容： table ...
JavaScript实现动态生成表格
10-15
在网页中，JavaScript可以用来创建各种交互效果，包括动态生成表格。本篇文章将详细探讨如何使用JavaScript来实现动态生成表格的功能。 首先，我们需要理解动态生成表格的基本流程。在用户界面上，通常会有一个或多...
JavaScript实现网页动态生成表格
01-21
JavaScript(JS)网页–动态生成表格，供大家参考，具体内容如下 在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行...
JS日期排班表(table表格)
weixin_42582705的博客
09-03 1834
JS日期排班表 可以根据当前年月进行自动渲染日期，星期，实现更改年月排布（table横向排版） <table class="table table-striped table-bordered" style="text-align: center;"> <thead> <tr> <th>星期</th> &
Javascript:日期排班功能实现
weixin_34126215的博客
04-11 1592
背景： 近期，公司的产品经常会遇到日期排班类似的功能； 需求的排班日期长短不一：有些是两周，有些是四周；要求选中的时候有一个active的状态区分，另外要提供钩子获取选中日期的形如：【2018-04-11】这种格式的数据。 实现： /* * 获取当天及之后的排班时间 * @param dayC...
关于值班表的前端显示
weixin_34186128的博客
12-09 1131
　　有这么一张图，如下，有没有想起它是什么呢？ 遇到实际问题： 比如值班人员具体值班时间显示，领导说，我要很直接的看出，哪些同学在哪个时间段的值班状态。 嗯是的，就是这么一句话。需求也就是这么一句话，剩下的自己发挥。 思考： 1.值班时间是一天24小时，不同的人轮流换班工作，也就是在这一天里，在某个时间段，人员是流动的。--24小时 怎么显示？ 2.要...
js动态生成表格
WXLeader的博客
07-21 4583
本案例相关知识点： 1. appendchild： appendChild() 方法向节点添加最后一个子节点。 提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。 您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 2. for(varkindatas[i])：for...in...语句 js中使用for(var k in obj)来遍历对象：https://blog.csdn.net/weixin_4565...
Java 输入直角三角形的行数实现有规律地打印直角三角形
程序羊的博客
12-04 2829
摘要：   今天在论坛看到一位网友的问题：java多重循环相关 原文如下：java多重循环相关 求解问题如下： 怎么让第三列及以后也像第二列一样，实现顺序输出？ 最终希望实现的效果图： 这段代码该怎么改？ import java.util.Scanner; public class test6 { public static void main(String[] args) { ...
JavaScript动态创建table表格
热门推荐
yangxin_blog的专栏
10-13 3万+
自动创建表格，主要是利用table对象的insertRow(),和insertCell()等技术
JS实现动态生成表格
weixin_42303695的博客
07-11 771
html和css body> <input type="text" id="input1" placeholder="请输入行" /> <input type="text" id="input2" placeholder="请输入列" /> <button id="btn">生成</button> <table border="1" id="tab"> </table> </body> td{w
用JavaScript动态创建一个100行10列的表格。
编码青年的专栏
09-07 2745
function onload(){ var div=document.getElementById(“tab”);//获取div对象 var table=document.createElement(“table”);//创建table对象 table.style.border=”1px solid black”; for(var i=0;i<100;i++){ var tr=table.ins
JAVAScript动态生成表格
最新发布
05-27
JavaScript动态生成表格可以通过DOM操作来实现。以下是一些基本的步骤： 1. 首先创建一个table元素，并设置其属性（如id、border等）。 2. 创建thead元素和tbody元素，并添加到table中。 3. 创建tr元素作为thead中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值