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

最新推荐文章于 2023-05-10 09:32:31 发布

lxmgfd

最新推荐文章于 2023-05-10 09:32:31 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： table ajax

本文链接：https://blog.youkuaiyun.com/lxmgfd/article/details/84007872

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用Ajax从服务器获取模块列表，并动态填充到HTML表格的方法。通过JavaScript代码实现了表格的动态更新，使得用户界面能够实时反映后端数据的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要显示的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();