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"
JS动态生成表格
m0_63502124的博客
10-27 308
【代码】JS动态生成表格。
JavaScript值班表代码
03-15
值班表代码，在网站内显示值班人员，JavaScript编写
用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...
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实现动态表格
贤蛋大眼萌
03-06 310
效果下： 分析： 添加 1、添加：给添加按钮绑定事件 2、获取文本框的内容 3、创建ttd，设置td的文本为文本框的内容 4、创建tr 5、将td添加搭配tr中 6、获取table，将tr添加到tr中 删除 1、确定点击的是哪一个超链接 2、怎么删除？ 3、使用removeChild（） 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ..
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。并且在每行...
jQuery插件注册表的返回
01-19 96
对于大家的jQuery插件开发者那里，我们有一些令人兴奋的消息要宣布。 新的jQuery插件注册网站近日正式上线。 这个新网站将取代旧插件注册表，并一直困扰着旧网站将“关于纠正了一些问题把重点”。 该网站有一个非常简单的接口，它允许插件消费者进行关键字搜索基础。 新网站是通过技术的分类，包括WordPress，Apache，MySQL和PHP，供电的Node.js和GitHub上 。 注册表本...
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...
用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
Java 输入直角三角形的行数实现有规律地打印直角三角形
程序羊的博客
12-04 2829
摘要：   今天在论坛看到一位网友的问题：java多重循环相关 原文如下：java多重循环相关 求解问题如下： 怎么让第三列及以后也像第二列一样，实现顺序输出？ 最终希望实现的效果图： 这段代码该怎么改？ import java.util.Scanner; public class test6 { public static void main(String[] args) { ...
控制台用户输入及while循环(下)
weixin_44239922的博客
01-06 563
上一小节已经详细讲解过while循环的结构和使用方法，本节主要讲述本人在具体应用中相关方法和小技巧 1.模拟控制台输入账户密码登陆，并将登陆限制最大错误次数限制为3次，超过3次后提示用户，错误次数超过上限，账户冻结 2.用户输入行数和列数 在控制台输入对应行数的表格（因为字体原因和系统问题，图形不规范还请见谅） ┏┳┳┓ ┣╋╋┫（——我们需要明白的是，画表格计算和循环的部分应该为中间部分，而...
JAVAScript动态生成表格
最新发布
05-27
JavaScript动态生成表格可以通过DOM操作来实现。以下是一些基本的步骤： 1. 首先创建一个table元素，并设置其属性（如id、border等）。 2. 创建thead元素和tbody元素，并添加到table中。 3. 创建tr元素作为thead中的一行，并创建th元素作为每列的标题。将th元素添加到tr中，再将tr添加到thead中。 4. 使用for循环或其他方法遍历数据，创建每个数据行，创建td元素用于每列数据。将td元素添加到tr中，再将tr添加到tbody中。 5. 将tbody添加到table中。 6. 最后将table元素添加到DOM中。 以下是一个简单的示例代码： ``` // 创建table元素 var table = document.createElement("table"); table.setAttribute("id", "myTable"); table.setAttribute("border", "1"); // 创建thead元素和tbody元素 var thead = document.createElement("thead"); var tbody = document.createElement("tbody"); // 创建thead中的一行 var tr = document.createElement("tr"); var th1 = document.createElement("th"); var th2 = document.createElement("th"); var th3 = document.createElement("th"); th1.innerHTML = "姓名"; th2.innerHTML = "年龄"; th3.innerHTML = "性别"; tr.appendChild(th1); tr.appendChild(th2); tr.appendChild(th3); thead.appendChild(tr); // 遍历数据，创建每个数据行 for (var i = 0; i < data.length; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); td1.innerHTML = data[i].name; td2.innerHTML = data[i].age; td3.innerHTML = data[i].sex; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tbody.appendChild(tr); } // 将thead和tbody添加到table中 table.appendChild(thead); table.appendChild(tbody); // 将table添加到DOM中 document.body.appendChild(table); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值