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

2024-09-27 07:03:31

本文实例讲述了JS实现动态生成html table表格的方法。分享给大家供大家参考，具体如下：

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

首先我们要在html里面有如下代码：

<table>
  <tbody id="tbody1">
  </tbody>
</table>

如果想在table里面加其他的可以随便加（如加一个表头等等），只需要知道等会js动态生成的内容全部会在tbody里面就可以了。

然后需要如下的js来动态生成html：

function creatTable(data){
 //这个函数的参数可以是从后台传过来的也可以是从其他任何地方传过来的
 //这里我假设这个data是一个长度为5的字符串数组 我要把他放在表格的一行里面，分成五列
 var tableData="<tr>"
 //动态增加5个td,并且把data数组的五个值赋给每个td
 for(var i=0;i<data.length;i++){
  tableData+="<td>"+data[i]+"</td>"
 }
 tableData+="</tr>"
 //现在tableData已经生成好了，把他赋值给上面的tbody
 $("#tbody1").html(tableData)
}

上面的那个tableData可以随意加html语言，例如我们给tr设置一下宽度，把var tableData=""改为：

var tableData="<tr style='width:300px'>"

需要注意的是因为我们在给tableData赋值的时候已经用了双引号，所以我们在设置style的时候要全部用单引号，不然就会报错，这个大家应该都知道，就不多说了。

最后就是在页面调用上面写的函数来给表格动态添加数据啦。或者我们也可以让页面在加载的时候就自动给表格动态添加数据：

<script type="text/javascript">
 window.onload()=function ()
 {
  //这个里面复制上面creatTable函数的内容
 }
</script>

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

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

基于HTML+CSS+JS实现增加删除修改tab导航特效代码

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&
JavaScript简单实现动态改变HTML内容的方法示例

本文实例讲述了JavaScript简单实现动态改变HTML内容的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript:改变 HTML 内容</title> <script> function myFunction() { x = document.getElementById(
js 动态创建 html元素

js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500px; position:relative;} #s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;} 没事造星星玩 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
JS函数修改html的元素内容,及修改属性内容的方法

修改元素内容: <body> <p id="pid">Hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } </script>
JS简单实现动态添加HTML标记的方法示例

本文实例讲述了JS简单实现动态添加HTML标记的方法.分享给大家供大家参考,具体如下: 一介绍动态添加一个HTML标记可以使用createElement()方法来实现. CreateElement()方法可以根据一个指定的类型来创建一个HTML标记. 语法: sElement=document.createElement(sName) sElement:用来接收该方法返回的一个对象. sName:用来设置HTML标记的类型和基本属性. 二应用动态添加一个文本框本示例通过单击"动态添加文
详解js的事件处理函数和动态创建html标记方法

1 HTML的事件属性全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发的事件(应用到 <body> 标签),常用的为onload. b. Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur.onfocus.onselect.onsubmit. c. keybord事件 d.Mouse
JS自动生成动态HTML验证码页面

本文为大家分享了JS自动生成动态HTML验证码页面,输入错误自动清空输入框功能,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>验证码</title> <meta charset="utf-8" /> <style type="text/css"> #code { font-family: Arial; font-style: it
JavaScript动态改变HTML页面元素例如添加或删除

可以通过JavaScript动态的改变HTML中的元素向HTML中添加元素首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
用javascript动态注释掉HTML代码

用javascript动态注释掉HTML代码 - 51windows.Net 1 2 3 4 alert("34") 5 6 alert("56") 7 8 你没有看到34单元格吧,因为他用javascript注释掉了,怎么做的?看源文件!源文件怎么看?点右键,选择"查看源文件(V)"... 注意:动态注释的html中不能再有html注释代码"",<script>与</ scrip
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C

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

相关推荐

随机推荐