js简单实现自动生成表格功能示例

本文实例讲述了js简单实现自动生成表格功能。分享给大家供大家参考，具体如下：

JS实现自动生成表格

由于自己的算法8太行，所以只能尽量用简单点的方法实现效果

下面直接上代码

 <table id="table">
 <thead>
  <td>姓名</td>
  <td>年龄</td>
  <td>身高</td>
 </thead>
 <tbody></tbody>
 </table>

 <style>
 .del{
  cursor: pointer;
  color: blue;
 }
 </style>

<script>
 var tableInfo = [
  { 姓名: '张三', 年龄: 20, 身高: 160 },
  { 姓名: '李四', 年龄: 18, 身高: 158 },
  { 姓名: '王二麻子', 年龄: 19, 身高: 180 },
  { 姓名: '孙悟空', 年龄: 100, 身高: 150 },
  { 姓名: '猪八戒', 年龄: 100, 身高: 155 },
  { 姓名: '龟龟', 年龄: 200, 身高: 0.5 }
 ]
  var tr = document.createElement('tr');
  var tdName = document.createElement('td');
  var tdAge = document.createElement('td');
  var tdTall = document.createElement('td');
  var del = document.createElement('span');

  //td赋值为对应的表格信息
  tdName.innerHTML = tableInfo[i].姓名;
  tdAge.innerHTML = tableInfo[i].年龄;
  tdTall.innerHTML = tableInfo[i].身高;
  //设置删除按钮
  del.innerHTML = '删除';
  del.className = 'del';
  //调用创建函数
  createAll(tdName, tdAge, tdTall);

 }
 //创建tr>td 和删除按钮
 function createAll(tdName, tdAge, tdTall) {
  table.appendChild(tr);
  tr.appendChild(tdName);
  tr.appendChild(tdAge);
  tr.appendChild(tdTall);
  tr.appendChild(del);
 }
 //设置删除按钮的点击事件
 var btnDel = document.getElementsByClassName('del');
 for (var i = 0; i < btnDel.length; i++) {
  btnDel[i].onclick = function () {
  //找到删除键的父节点(tr)并移除
  this.parentNode.remove();
  }
 }
 </script>

代码效果：

如果有什么地方做的不够完善，请多多指教

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js动态生成指定行数的表格

    js动态生成指定行数的表格

    下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 复制代码 代码如下: <table> <tr> <td>动态生成表格</td> <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td&g

  • 用按钮触发Javascript动态生成一个表格的代码

    动态添加表格 function z() { q.innerHTML=q.innerHTML+' 热烈欢迎你光临!! ' } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 用js实现的一个根据内容自动生成表格的函数

    晚上突然看到以前做asp时写的一个根据数据库数据自动生成表格的程序. 要求是: 1,对于空内容,应该写为"<td> </td>",否则在ie会显示的很变态(ie当作该单元格不存在). 2,当输出数据条数不等于表格的"长X宽"时,用"<td> </td>"自动填补最后一行空余的地方. 其实也很简单,当时做asp时用了一个较复杂的算法(下面代码中MakeTable2),今天又想到一个更容易理解的算法(M

  • 用js+xml自动生成表格的东西

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="javascript"> function loadXML(handler) {     var url = &

  • 利用JS动态生成隔行换色HTML表格的两种方法

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> <html> <head> <title>动态表格</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description"

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

  • js生成动态表格并为每个单元格添加单击事件的方法

    html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu

  • 基于JavaScript代码实现自动生成表格

    废话不多说,直接给大家贴js代码了,具体代码如下所示: //js实现输入表格行数.列数自动生成表格源代码 <!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"

  • JavaScript根据json生成html表格的示例代码

    之前公司有一个需求是:通过js来生成html.而且大部分都是生成表格,直接通过字符串拼接的话,代码的可复用性太低的,所以写了个通用的json转html表格的工具. 代码 htmlKit = { _tags: [], html: [], _createAttrs: function (attrs) { var attrStr = []; for (var key in attrs) { if (!attrs.hasOwnProperty(key)) continue; attrStr.push(k

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • JS实现动态生成html table表格的方法分析

    本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: <table> <tbody id="tbody1"> </tbody> </table> 如果想在table里面加其他的可以随便加(

  • JavaScript生成带有缩进的表格代码

    JavaScript生成带有缩进的表格代码

    最近做了个用户管理系统,其中有项目需求,要求用js生成带有缩进的表格,真是把我难住了,通过查阅相关资料,才实现此功能,下面小编把实现代码做个笔记,也方便以后查找,同时也希望能与我同样需求的朋友可以做个参考,如有更好的方法,留言给我,谢谢! js做如下表格: json [{"id":302,"serviceId":15,"name":"data","type":"JsonObject",&

随机推荐