`

js根据数据库数据动态画table

    博客分类:
  • js
阅读更多

要显示的table:

<table rules=rows border="1" id="table">
     <tr>
	 <td>模块名称</td>
	 <td>状态</td> 		
     </tr>	
</table>


对应的画表代码:

  var mLength;
  function init(){  
	  	$.ajax({
			 url:"modules/getAllModules.action",
			 type : 'POST',
			 dataType : 'json',
			 success : function(data) {
	 			var len = data.modulesList.length;
	 			mLength = len;
	 			for(var i=0;i<len;i++)
	 			{
	 		 		$("#table").append("<tr ><td colspan='2'>" +
	 		 				"<input type='hidden' id='"+(i+1)+
	 		 				"' value='"+(i+1)+"' name='mId'>" +
	 		 				"<label for='s"+(i+1)+"'>" + 
	 		 				(data.modulesList[i].mname) +
	 		 		 		"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
	 		 		 		"<input type='checkbox' id='s"+(i+1)+
	 		 		 		"' name='parentId'/></label></td></tr>");
	 			}
			 }
		 });
  }   



亮点就是append();

 

  • 大小: 5.3 KB
  • 大小: 29.2 KB
分享到:
评论

相关推荐

    使用数据库记录动态填充HTML Table控件

    在网页开发中,HTML Table控件是用于展示结构化数据的一种常见方式,尤其在与数据库交互时,动态填充表格能够使数据更新实时且直观。本文将深入探讨如何使用数据库记录来动态填充HTML Table控件,以实现高效的数据...

    nodejs显示MySQL数据库数据

    总的来说,使用Node.js显示MySQL数据库数据的关键步骤包括:安装mysql库,创建数据库连接,编写SQL查询,处理查询结果,以及在操作完成后关闭连接。这只是一个基础的示例,实际应用中可能需要涉及更复杂的查询、事务...

    js 访问 sqlite数据库

    总结,JavaScript访问SQLite数据库主要依赖于Web SQL(已废弃)、IndexedDB(推荐)或在Node.js环境下的特定库。理解这些技术的工作原理,掌握基本的数据库操作和异步编程技巧,以及关注性能和安全,是成功实现这一...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    spring4 MVC +maven + mysql数据库 + mybatis+根据后台json前台动态生成table

    在本项目中,我们主要探讨的是如何利用Spring4 MVC、Maven、MySQL数据库、MyBatis框架以及前端JSON数据来动态生成表格。这是一个常见的Web应用开发模式,它可以帮助开发者快速构建数据驱动的Web应用程序。 首先,...

    autoComplete动态从数据库加载数据

    标题中的"autoComplete动态从数据库加载数据"是指在前端网页应用中使用JavaScript(js)实现自动补全功能,这项功能通常被用于输入框,当用户输入文字时,系统会从数据库(这里是MySQL)中实时查询匹配的数据并显示...

    使用JS写服务器端连接数据库的代码示例

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者使用JavaScript编写后端代码,包括连接和操作数据库。本示例将深入讲解如何使用Node.js的MySQL模块来连接MySQL数据库。 首先,确保已经安装了...

    bootstrap-table真实交互数据

    4. **数据绑定**:在Bootstrap Table中,数据可以通过两种方式绑定:静态数据和动态数据。静态数据是直接写入HTML的;动态数据则需要配置`data-url`属性,指定一个服务器端接口,用于获取数据。"真实交互数据"的例子...

    把数据库的table表转换成json格式的字符串

    将数据库的Table表转换成JSON格式的字符串是数据处理与传输中的常见需求,尤其是在Web开发领域,这种转换有助于实现前后端的数据交互,因为JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人...

    C# 作的动态定义数据库字段

    2. 动态表创建:在用户定义了字段后,可以生成SQL的CREATE TABLE语句,使用反射获取自定义字段的元数据,然后执行SQL语句创建新的数据库表。 3. 增删改查操作:提供一个界面让用户进行数据的添加、删除、修改和查询...

    JavaScript连接数据库实例

    JavaScript 连接数据库实例是指使用 JavaScript 语言连接数据库,实现数据的交互和操作。在本文中,我们将详细介绍 JavaScript 连接数据库实例的实现方法和相关知识点。 一、JavaScript 连接数据库实例的实现 在 ...

    node连接数据库获取内容,把数据返回到前台页面

    在IT行业中,Node.js是一个非常流行的JavaScript运行环境,它允许开发者使用JavaScript进行后端开发。在本场景中,我们将探讨如何使用Node.js连接MySQL数据库,获取数据,并将这些数据返回到前端页面,如HTML5(H5)...

    SpringMVC实现动态加表及字段并显示数据

    在实现动态功能时,这些配置可能需要根据实际情况调整,比如添加新的数据源以支持动态创建的表,或者配置事务以确保数据库操作的一致性。 总结起来,使用SpringMVC实现动态加表及字段并显示数据,需要理解SpringMVC...

    一个动态添加table行的js例子

    在JavaScript编程中,动态添加和删除表格行是一个常见的需求,特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先,我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...

    jquery实现json数据填充到table表格中并且实现remove add 数据

    我们可以先创建一个空的表格,然后根据JSON数据动态生成行。 在JavaScript或jQuery代码中,我们可以通过`$.getJSON()`方法来获取服务器端的JSON数据。成功获取数据后,遍历JSON数组,使用`append()`方法将每一项...

    JavaScript操作SQLite数据库Demo

    除了Web SQL API,还可以使用像`sql.js`这样的库,它允许你在Node.js或浏览器中使用JavaScript操作SQLite数据库,无需依赖于特定的API。 为了验证数据是否正确存储,你可以使用SQLiteStudio等工具,将JavaScript...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JS连接数据库.txt

    ### JS连接数据库知识点详解 #### 一、概述 在现代Web开发中,JavaScript作为一种非常流行的前端脚本语言,被广泛应用于构建动态网页和交互式应用。然而,由于JavaScript本身运行在客户端浏览器上,直接通过纯...

    highcharts加载数据库数据(java版)

    总结来说,实现"Highcharts加载数据库数据(java版)"涉及到的主要步骤包括:后端Java程序连接数据库,获取数据,转换数据为JSON,通过HTTP响应返回;前端JavaScript通过Ajax请求获取JSON数据,使用Highcharts绘制...

    [Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化2

    这样,图表就会根据数据库中的数据动态变化,实现数据的实时可视化。 总结一下,实现Echarts动态数据可视化的主要步骤包括: 1. 配置Echarts实例,定义图表的样式和数据。 2. 在后端使用PHP连接到MySQL数据库,...

Global site tag (gtag.js) - Google Analytics