设为首页收藏本站

SKY外语、计算机论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1673|回复: 0

[网络编程] js 简化版动态添加表格

[复制链接]

7

主题

6

好友

130

积分

注册会员

Rank: 2

生肖
星座
金牛座
性别
发表于 2014-1-6 23:27:34 |显示全部楼层
本帖最后由 sky_yoyo 于 2014-1-8 17:39 编辑

作者:sky_yoyo 日期:2014-01-08 原文地址:

A:


B:


  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>表格的动态添加</title>
  6.     <script type="text/javascript">
  7.         //缓存数据在页面
  8.         var header = ["编号", "名称", "出版社", "价格"];
  9.         var books = [{
  10.             bookNo: "001",
  11.             name: "js高级程序设计",
  12.             press: "邮电大学出版",
  13.             priess: "333"
  14.         },
  15.         {
  16.             bookNo: "002",
  17.             name: "HTML高级程序设计",
  18.             press: "邮电大学出版",
  19.             priess: "333"
  20.         },
  21.         {
  22.             bookNo: "003",
  23.             name: "C#高级程序设计",
  24.             press: "邮电大学出版",
  25.             priess: "333"
  26.         }
  27.         ];

  28.         //创建表格的方法
  29.         function CreateTable() {
  30.             //创建表格对象
  31.             var objTable = document.createElement("table");

  32.             //设置表格属性
  33.             objTable.setAttribute("border", "1");
  34.             objTable.setAttribute("id", "bookTable");

  35.             //创建caption对象
  36.             var objCaption = document.createElement("caption");
  37.             objCaption.innerText = "图书列表";
  38.             objTable.appendChild(objCaption);

  39.             //创建表头header
  40.             var objheader = document.createElement("thead");
  41.             var objheaderRow = objheader.insertRow(0);//表头行下标

  42.             //创建th
  43.             for (var i = 0; i < header.length; i++) {
  44.                 var headerCell = objheaderRow.insertCell(i);
  45.                 headerCell.innerText = header[i];
  46.             }
  47.             objTable.appendChild(objheader);//表头加入表格对象

  48.             //创建表格元素--tbody
  49.             var objBody = document.createElement("tbody");
  50.            
  51.             //创建内容--行
  52.             for (var i = 0; i < books.length; i++) {
  53.                 var index = objBody.rows.length;        //内容行的长度
  54.                
  55.                 //行号
  56.                 var objRow = objBody.insertRow(index);  //行

  57.                 //var objCell = objRow.insertcell(1);     //列
  58.                 //objCell.innerText = books[i].bookNo;    //只取表的编号
  59.                 //-------简化创建列-----
  60.                 for (var prop in books[i])//占位--属性位prop  、 编号位books[i]
  61.                 {
  62.                     var objCell = objRow.insertCell(objRow.cells.length);
  63.                     objCell.innerHTML = books[i][prop];

  64.                     //双击编辑--ondblclick
  65.                     objCell.ondblclick = function () {
  66.                         //将表格框改为文本编辑框
  67.                         this.innerHTML = "<input type='text' value='" + this.innerText + "'/>";
  68.                         this.childNodes[0].focus();//表单提交
  69.                         //onblur获得焦点
  70.                         this.childNodes[0].onblur = function () {
  71.                             //显示修改后的html节点
  72.                             this.parentNode.innerHTML = this.value;
  73.                         }
  74.                     }
  75.                 }
  76.                 //得到插入的位置(最后一行插入数据)
  77.                 var objCell = objRow.insertCell(objRow.cells.length);
  78.                 //删除按钮
  79.                 objCell.innerHTML = "<input name='btn_dele_Row' type='button' value='删除' />";

  80.             }

  81.             objTable.appendChild(objBody);     //主体对象加入
  82.             document.body.appendChild(objTable);//table输入页面
  83.         }


  84.         //---------创建表格
  85.         window.onload = function () {
  86.             //创建表格的按钮事件
  87.             var btn_create_table = document.getElementById("createTable");
  88.             btn_create_table.onclick = function () {
  89.                 //调用创建表格的方法
  90.                 CreateTable();

  91.                 //删除行按钮
  92.                 var btnDeleRow = document.getElementsByName("btn_dele_Row");
  93.                 for (var i = 0; i < btnDeleRow.length; i++) {
  94.                     //按钮所在行-事件
  95.                     btnDeleRow[i].onclick = function () {
  96.                         //当前一行
  97.                         var r = this.parentNode.parentNode;
  98.                         //删除选择记录
  99.                         document.getElementById("bookTable").children[2].deleteRow(r.rowIndex - 1);
  100.                     }
  101.                 }
  102.             }

  103.         }//end---------创建表格

  104.     </script>
  105. </head>
  106. <body>

  107.     <input id="createTable" type="button" value="创建表格" />

  108. </body>
  109. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册


手机版|SKY外语、计算机论坛 ( 粤ICP备12031577 )    

GMT+8, 2019-10-22 06:25 , Processed in 0.173828 second(s), 27 queries .

回顶部