javascript 生成动态表格

myangelo 2009-04-19 08:42:36


谢帮助 给一个思路。高手把注释写上越详细越好。谢谢各位大虾~~~~。不要这么复杂有个思路就行了。这样好吗？谢谢了。祝哥们身体健康，
...全文
841 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
tanqingping 2009-10-12
  • 打赏
  • 举报
 回复
#9楼没有回复任何内容怎么得了20分啊，我还想来学习一下那，哎，上当了
zsyok 2009-07-31
  • 打赏
  • 举报
 回复
加精
zsyok 2009-07-31
  • 打赏
  • 举报
 回复
加精
jakeycis 2009-04-19
  • 打赏
  • 举报
 回复
2楼的回复最好，为什么老是要给详细代码的，我觉得方法思路比代码重要的多
staywithc 2009-04-19
  • 打赏
  • 举报
 回复
部分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="""" 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>
staywithc 2009-04-19
  • 打赏
  • 举报
 回复
前段时间写的动态增加、删除、修改的列表项目，我用的是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");

  }

};
liujun_wangyi 2009-04-19
  • 打赏
  • 举报
 回复
我以前写了一个是一个链接数据库的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
  • 打赏
  • 举报
 回复 
<!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修改数据。
这种方法好处在于，表格的模板你可以用可视化工具进行可视化的设计，包括样式等等。而不是全部用代码来创建，最终显示效果要等运行了才看到。
把这种方法封装成一个类来用，就方便多了。
s_liangchao1s 2009-04-19
  • 打赏
  • 举报
 回复
懒得写，这些东西你完全可以google
如果DOM创建 无非 document.createElement(); otbl.insertCell otr.insertRow
或者用innerHTML方法
Prosperou 2009-04-19
  • 打赏
  • 举报
 回复
学习了
JavaScript动态生成表格案例
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 "student-table"。该表格包含了表头和表体，其中表头包含了四列：姓名、科目、成绩和操作。 在 JavaScript 脚本中，首先定义了一个数组 students 存储了几个学生的信息。然后获取了表格元素及其 tbody 元素，通过 for 循环遍历数组中的每个学生，动态创建了表格的每一行和每个单元格，并将学生的信息填充到对应的单元格中。 最后，为每行的删除操作添加了点击事件处理程序。当用户单击删除链接时，通过 this.parentNode.parentNode 找到要删除的行，再通过 tbody 删除该行。
extjs动态生成表格,前台+后台
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
JavaScript实现动态生成表格
主要为大家详细介绍了JavaScript实现动态生成表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javaScript生成表格
javaScript生成表格
动态生成表格
NULL 博文链接：https://ylq2250.iteye.com/blog/790854
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章