javascript 生成动态表格-CSDN论坛

javascript 生成动态表格

Web 开发 > JavaScript

收藏回复

[问题点数：20分，结帖人myangelo]

⋅求代码。javascript 进来看来看吧 ⋅关于sql 调用。 ⋅asp.net 写入数据库后输出 更多帖子 关注私信空间博客 myangelo 等级 本版专家分：5 结帖率 100%: 谢帮助给一个思路。高手把注释写上越详细越好。谢谢各位大虾~~~~。不要这么复杂有个思路就行了。这样好吗？谢谢了。祝哥们身体健康，

2009-04-19 08:42:36

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅IE6下注册表无法运行 ⋅散分,求同伙 ⋅散分+交流 更多帖子 关注私信空间博客 s_liangchao1s 等级 本版专家分：30360 勋章 蓝花 2009年8月 Web 开发大版内专家分月排行榜第三 2008年7月 Web 开发大版内专家分月排行榜第三 2008年6月 Web 开发大版内专家分月排行榜第三 2008年5月 Web 开发大版内专家分月排行榜第三: 懒得写，这些东西你完全可以google
如果DOM创建无非 document.createElement(); otbl.insertCell otr.insertRow
或者用innerHTML方法

2009-04-19 09:26:15

点赞只看TA 引用举报 #1得分 0

⋅关于匿名类的访问问题，100分求助 ⋅javascript的类继承机制 ⋅如何在MapReduce函数中查询并使用其它集合的数据 更多帖子 关注私信空间博客 蓝色_冰点 等级 本版专家分：4735

<!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>

    <title>无标题页</title>

    <script language="javascript" type="text/javascript">

    window.onload=function()

    {

        var table=document.getElementById("tableTest");

        var tbody=table.tBodies[0]; //取得模板部分

        var tplRow=tbody.rows[0];   //取得该tbody的第一行为模板

        tbody.removeChild(tplRow);  //删除该行

        

        //创建一行

        var row=tplRow.cloneNode(true);     //深层拷贝，相当于复制一行模板

        tbody.appendChild(row);     //加入到表格中

        //设置该行数据

        row.cells["c1"].innerHTML="数据1";  

        row.cells["c2"].innerHTML="数据2";  

        row.cells["c3"].innerHTML="数据3";  

        row.cells["c4"].innerHTML="数据4";  

        

        //创建一行

        row=tplRow.cloneNode(true);     //深层拷贝，相当于复制一行模板

        tbody.appendChild(row);     //加入到表格中

        //设置该行数据

        row.cells["c1"].innerHTML="数据5";  

        row.cells["c2"].innerHTML="数据6";  

        row.cells["c3"].innerHTML="数据7";  

        //row.cells["c4"].innerHTML="数据4";  //如果不设置某格数据，该格子数据则为模板中的数据

    }

    </script>

</head>

<body>

    <table id="tableTest" border="1" width="400">

        <!--表格标题行-->

        <thead><tr>

            <th>h1</th>

            <th>h2</th>

            <th>h3</th>

            <th>h4</th>

        </tr></thead>

        <!--表格标题行-->

        

        <!--表格模板部分-->

        <tbody><tr>

            <td id="c1">a</td>

            <td id="c2">b</td>

            <td id="c3">c</td>

            <td id="c4">dddd</td>

        </tr></tbody>

        <!--表格模板部分-->

    </table>

</body>

</html>

主要思路就是，取得一个模板行，然后利用cloneNode(true)方法进行深层拷贝，然后加到表格中，再根据格子ID修改数据。
这种方法好处在于，表格的模板你可以用可视化工具进行可视化的设计，包括样式等等。而不是全部用代码来创建，最终显示效果要等运行了才看到。
把这种方法封装成一个类来用，就方便多了。

2009-04-19 09:54:41

点赞只看TA 引用举报 #2得分 0

⋅用java 写.mpp文件 ⋅程序员要不要打游戏 ⋅extjs 桌面 更多帖子 关注私信空间博客 liujun_wangyi 等级 本版专家分：10: 我以前写了一个是一个链接数据库的js,太长了样式就不给你了
function selectInfo()
{
var rowCount=0;
var tbody=document.getElementById("tobdy");
clearText(tbody);
var con=createConnection();
var rs = new ActiveXObject("ADODB.Recordset");
var sql="select top 5 * from student where stuId not in (select top "+(pageCount*5)+" stuId from student)";
rs.open(sql,con);
while(!rs.EOF)
{
rowCount++;
var tr = document.createElement("tr");

var stuIdTd=document.createElement("td");
var stuNameTd=document.createElement("td");
var stuSexTd=document.createElement("td");
var stuPhoneTd=document.createElement("td");
var stuAddressTd=document.createElement("td");
var stuHandleTd=document.createElement("td");

if(rowCount % 2 == 0)
{
stuIdTd.style.backgroundColor="#ffffff";
stuNameTd.style.backgroundColor="#ffffff";
stuSexTd.style.backgroundColor="#ffffff";
stuPhoneTd.style.backgroundColor="#ffffff";
stuHandleTd.style.backgroundColor="#ffffff";
stuAddressTd.style.backgroundColor="#ffffff";

}

stuIdTd.onmouseover=function(){
onmouseoverFun(this);
}
stuNameTd.onmouseover=function(){
onmouseoverFun(this);
}
stuSexTd.onmouseover=function(){
onmouseoverFun(this);
}
stuPhoneTd.onmouseover=function(){
onmouseoverFun(this);
}
stuAddressTd.onmouseover=function(){
onmouseoverFun(this);
}
stuHandleTd.onmouseover=function(){
onmouseoverFun(this);
}

stuIdTd.onmouseout=function(){
onmouseoutFun(this);
}
stuNameTd.onmouseout=function(){
onmouseoutFun(this);
}
stuSexTd.onmouseout=function(){
onmouseoutFun(this);
}
stuPhoneTd.onmouseout=function(){
onmouseoutFun(this);
}
stuAddressTd.onmouseout=function(){
onmouseoutFun(this);
}
stuHandleTd.onmouseout=function(){
onmouseoutFun(this);
}
var stuImage1=document.createElement("image");
stuImage1.setAttribute("src","image/editb.gif");
stuImage1.setAttribute("title","修改");
stuImage1.onclick=function(){
updateText(this);
}
var stuImage2=document.createElement("image");
stuImage2.setAttribute("src","image/del2.gif");
stuImage2.setAttribute("title","删除");
stuImage2.onclick=function()
{
deleteInfo(this);
}

var stuId=document.createTextNode(rs("stuId"));
var stuName=document.createTextNode(rs("stuName"));
var stuSex=document.createTextNode(rs("stuSex"));
var stuPhone=document.createTextNode(rs("stuPhone"));
var stuAddress=document.createTextNode(rs("stuAddress"));
var stuOther=document.createTextNode(" ");

stuIdTd.appendChild(stuId);

stuNameTd.appendChild(stuName);
stuSexTd.appendChild(stuSex);
stuPhoneTd.appendChild(stuPhone);
stuAddressTd.appendChild(stuAddress);
stuHandleTd.appendChild(stuImage1);
stuHandleTd.appendChild(stuOther);
stuHandleTd.appendChild(stuImage2);

tr.appendChild(stuIdTd);
tr.appendChild(stuNameTd);
tr.appendChild(stuSexTd);
tr.appendChild(stuPhoneTd);
tr.appendChild(stuAddressTd);
tr.appendChild(stuHandleTd);

tbody.appendChild(tr);
rs.moveNext;
}
closeText(rs,con);
}

2009-04-19 10:04:49

点赞只看TA 引用举报 #3得分 0

⋅诡异问题，click事件需要第二次点击才执行 ⋅ASP.NET MVC客户端验证问题 ⋅MVC强类型View的问题--关于checkboxfor的用法 更多帖子 关注私信空间博客 staywithc 等级 本版专家分：402

前段时间写的动态增加、删除、修改的列表项目，我用的是div，不过用table 是一回事，可参考修改，

注意：利用了Jquery 1.3，感觉还是比较方便的



var oTravel = {

  from:function(){

    return $("#tbFrom").val();

  },

  to:function(){

    return $("#tbTo").val();

  },

  tool:function(){

    return $("#selType option:selected").text();

  },

  detail:function(){

    return $("#selDetail option:selected").text();

    

  },

  Add:function(){

    travelId++;

    

    var str = "";

    str += "<div id='div" + travelId + "'><span style='width:80%'>" + "<img src='http://rbis.rigol.com/rbis/images/groupbox_expand.gif'>" + " 从 <font id='fFrom' color=black>" + oTravel.from() + "</font> 到 ";

    str += "<font id='fTo' color=black>" + oTravel.to() + "</font>";

    str += " 交通工具：<font id='fTool'color=black>" + oTravel.tool() + "</font> <font id='fDetail'color=black>" + oTravel.detail() + "</font></span>";

    str += "<span><img class='pic' src='http://rbis.rigol.com/rbis/images/pencile.gif' title='修改' onclick='oTravel.Upd(this)'>";

    str += "<img class='pic' title='删除' class='del' src='http://rbis.rigol.com/rbis/images/del.gif' id='del"+travelId+"' onclick='oTravel.Del(this)'></span>";    

    str += "</div>";

    $("#travelBody").append(str);

    

    

    

  },

  Del:function(obj){

    $(obj).parent().parent().remove();

  },

  Upd:function(obj){

    $(obj).parent().parent().parent().find("div").each(function(){

      $(this).removeClass("selectUpd");

    });

    $("#tbFrom").val($(obj).parent().parent().find("#fFrom").html());

    $("#tbTo").val($(obj).parent().parent().find("#fTo").html());

    var tool = $(obj).parent().parent().find("#fTool").html();

    $("#selType").val(tool);

    linkSelect(tool);

    

    $("#selDetail").val($(obj).parent().parent().find("#fDetail").html());

    

    $("#btnAdd").hide();

    $("#btnUpd").show();

    

    $("#btnUpd").attr("tag",$(obj).parent().parent().attr("id"));

    

    $(obj).parent().parent().addClass("selectUpd");

  }

};

2009-04-19 10:53:55

点赞只看TA 引用举报 #4得分 0

部分HTML代码



<tr>

<td><div id="travelHead">出发地</td>

<td>

<input name="tbFrom" value="" id="tbFrom"></td>

<td><div id="travelHead">目的地</td>

<td>

<input name="tbTo" value="" id="tbTo"></td>

</tr>

<tr id="trSelect">

<td><div id="travelHead">交通工具</td>

<td>

<select name="selType" id="selType">

<option value="&quot;&quot;" selected>

<option value="_c2ersi4trv8_">飞机

<option value="_62etv04tjmk_">火车

<option value="_52f1dc4tklg_">轮船</select>

</td>

<td><div id="travelHead">明细</td>

<td>

<input name="%%Surrogate_selDetail" type="hidden" value="1">

<select name="selDetail" id="selDetail">

<option value="" selected></select>

</td>

<td colspan=4 style="border-top:0px;">

<input id="btnAdd" type="button" value="添  加" style="margin-left:40px" onclick="javascript:oTravel.Add()" />

<input id="btnUpd" type="button" value="修  改" style="display:none;margin-left:40px" onclick="updTravel(this)" />

</td>

</tr>

<tr>

<td>出差明细</td>

<td colspan=7>

<div id="travelBody">

</div>

</td>

</tr>

2009-04-19 10:56:42

点赞只看TA 引用举报 #5得分 0

⋅帮忙测试下网站 ⋅这个网站如何制作 更多帖子 关注私信空间博客 jakeycis 等级 本版专家分：29: 2楼的回复最好，为什么老是要给详细代码的，我觉得方法思路比代码重要的多

2009-04-19 10:58:31

点赞只看TA 引用举报 #6得分 0

⋅C# 怎么把JSON解析到对象 ⋅生成validateString 求把PHP代码转成c#实现方式 ⋅求一个软件开发项目计划书 更多帖子 关注私信空间博客 Prosperou 等级 本版专家分：0: 学习了

2009-04-19 14:38:51

点赞只看TA 引用举报 #7得分 0

⋅直接上圖，帮忙分析下代码 ⋅诡异的读取数据库时间 ⋅ASPX文件类型不带UTF8 不带BOM 就乱码 更多帖子 关注私信空间博客 zsyok 等级 本版专家分：194: 加精

2009-07-31 16:41:32

点赞只看TA 引用举报 #8得分 0

⋅直接上圖，帮忙分析下代码 ⋅诡异的读取数据库时间 ⋅ASPX文件类型不带UTF8 不带BOM 就乱码 更多帖子 关注私信空间博客 zsyok 等级 本版专家分：194: 加精

2009-07-31 16:42:19

点赞只看TA 引用举报 #9得分 20

⋅此用户还没有发表过任何帖子 关注私信空间博客 tanqingping 等级 本版专家分：0: #9楼没有回复任何内容怎么得了20分啊，我还想来学习一下那，哎，上当了

2009-10-12 16:09:06

点赞只看TA 引用举报 #10得分 0

1 2

收起

收藏回复

myangelo

等级：

关注私信 TA的帖子

用js实现动态添加表格数据: 第一种方式:<!DOCTYPE HTML><html><head><meta charset=UTF-8><title>table</title><... border-c

JavaScript 自动在表格前面增加序号: javascript" type="text/javascript"> window.onload = function(){ var oTable = document.getElementById("num"); for(var i=0;i<oTable.rows.length;i++){ .....

javascript绘制静态或者动态的图表、关系表、流程图-JointJS: JointJS现代HTML 5是一个JavaScript库与图表和图形可视化和交互。它可以被用来创建静态图,或者更重要的是,完全交互式绘图工具和应用程序构建器。JointJS可用来方便地创建各种可视化工具。

15款经典图表软件推荐创建最漂亮的图表: 在这篇文章中，将列出图表，图形和数据可视化的最佳软件，从创建基本的2D图表到产生复杂的数据集的数据可视化，这些PHP，Javascript、Flash的图表，对于任何一个严谨的开发者都是必须一览的。 1.Fusion ...

25 个在 Web 中嵌入图表的免费资源: 在 Web 中嵌入图形图表的技术越来越丰富，我们可以选择 JavaScript 库，CSS，Flash，Silverlight，PHP库，服务器端的组件，也可以选择 Google ...JS Charts (基于 JavaScript 的图表生成工具)Protovis (可视化 java

10款强大的开源 Javascript 图表库: 文章介绍了10款开源的 Javascript 图表库。

用js快速动态生成bootstrap table表格数据: 1.html页面  js方法 <script type="text/javascript"> var $table

常用的web前端框架 --- 图形报表: Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...

javascript动态生成table: javascript动态生成Table是在迫不得以的情况下使用。因为表格会耗费大量的时间进行重绘。而且如果窗口变化了，还会引起意想不到的格式变化。所以最好不要使用。先在中添加一个下面就可以使用javascript代码来做这...

DOM操作，javascript动态生成表格: javascript动态生成表格，主要是利用DOM创建节点。所利用到的函数主要有以下三个： document.createElement() document.gerElementByTagName() document.appendChild() 以下是简单的源代码：<!doctype html> ...

JQuery动态生成Table表格: 主要用到了JQuery中的append和appendto的方法,具体代码如下:

10款强大的JavaScript图表图形插件推荐: 上有很多用于绘制图表图形的免费JavaScript插件和图表库，这类插件大量出现的原因，一是人们不再依赖于Flash，二是浏览器和精密的计算使呈现实时数据变得容易，而且各种向量绘图技术像VML、SVG和Canvas的发展也使之...

利用javascript动态添加表格行以及删除表格行: 首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。如图：对应的html代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "...tit...

[开源]25 个在 Web 中嵌入图表的免费资源: 免费图表控件

JavaScript制作网页数据图表/曲线图: 这是几个JS做的，界面一般吧，不过普通的够用，我下篇介绍几个FLASH的，功能好些的这...例如，将大数据量的信息点阵化和图表化，或许能够替换掉在网页（或Web应用程序）上以表格形式来表现数据这种古老的方式。目前，已

9个主流的前端图表框架: 是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Ko

js动态生成html表格: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成，我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊，于是决定写个博来解救万千小伙伴于水火之中（mdzz）首先我们要在html里面有如下代码： ...

JavaScript动态添加/删除表格行: 使用原生JavaScript来解决简单的table行动态增删问题

js实现自动生成表格: //js实现输入表格行数、列数自动生成表格源代码自动创建表格 table{ width:300px; height:100px; border:#0C9 1px solid; border-collapse:collapse; } function autocreate(){ //创建table表格 var...

js动态生成table 经典: <script language="javascript" type="text/javascript"> function createTable(){ <br /> var div = document.getElementById("dd"); var table = document.createElement("table...

js 利用标签遍历查询结果生成一个table，怎样获得每行的动态id？: ![图片说明](https://img-ask.csdn.net/upload/201710/09/1507553856_719524.png) ![图片说明]...!...为什么我的 document.getElementById("${status.index}")；这种方式取不到动态的id号？求大神解释

js 动态生成table: 前几天一朋友问我js怎么控制页面动态生成表格，我整理了一下代码： js代码： <script language="javascript"> var data = [{"id": 1, "name": "张三"},{&...

用js 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格: 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格

js如何获取table中动态生成的数据: 今天又学一招，多谢莉妹啦。 js如下： $('#labe-table tr td #attrcode').each(function () { alert($(this).val()); }); 页面如下：参数编码参数名称单位（分钟）单价（元）备注

JavaScript简单的读取JSON并生成表格: 通过读取JSON，并把其生成表格。其实也就几个步骤：（一）解析文件，把文件转换为JavaScript对象；（二）读取JSON里键和值的长度创建表格；（三）把JSON的键和值填进表格；（四）点击对应信息时生成名片。下面是代码...

【寒江雪】JQuery+Bootstrap动态生成表格: 源代码已经发布，生成的表格虽然比较简陋，能用就行吧 https://github.com/HJXTSTU/AutoTable-With-Javascript

Echarts图表之插件生成PDF下载: 需要用到的插件：<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"> <script src="js/jspdf.min.js" type="text/javascript" charset="utf-8"> <script src="js/echarts3.js"

10个最好的免费Javascript图表生成方案: 10个最好的免费Javascript图表生成方案

JavaScript一维数组动态生成N行N列table表格的问题: 这里讲的是JavaScript一维数组动态生成N行N列table表格的问题

怎么把动态生成的table表格中的所有td绑定上单击事件，当点击td的时候变成编辑状态。: 我也知道可以在td标签上绑定单击事件，然后在td中加入文本框，但是我死活就是绑定不上td，为什么？就包括我在网页上只写一个td，里面写一个按钮，我绑定这个按钮都绑定不上为什么？

相关热词 c#用函数打印菱形 c# 文件名合法 c# 枚举名称 c# out ref c#五子棋人机 c# ef 事务删除 c# this 属性 c#注册代码没有数据库 c#限定时间范围 c#控件跟随窗口大小变化