如何让表单中的第一行菜单变为动态

此贴为记录贴，是关于如何让菜单栏目变成动态主题的总结
以前在写表单的时候总是把表单的第一行主题给写死，比如像下面图片这样

当时没想那么多，只顾着完成当前的功能，但是后期在维护的时候真的是血亏
就比如说如果需求要让我们再加一个科目“化学”，那么我们有得重新打开编译器，找到所对应的前端代码，然后把这个页面再一次写死改好，如果是一个页面还好说，但这显然是不可能的。
那么这么做无疑是徒劳的，所以我们必须开发出一种解决方案来解决这个问题，那么下面我就来分享我的解决方案

解决方案

说到动态我们第一时间会想到用一个list+数据库把这些头部信息储存起来对吧，那么问题来了，我们是用一个字段存储还是多个呢，那么答案已经很明显了，如果咱们是多字段储存，那么在主题个数未知的情况下我们怎么知道该设计多少字段呢，所以我们必需得用一个字段来存储所有主体
那么，我们可以将主题转换为json字符串，然后把该字符串存到一个字段中，在读取的时候我们只需要将该字符串读取到String中，然后直接把这个字符串返回给前端页面即可

那下面的一串json打个比方

[{"sName":"语文"},{"sName":"数学"},{"sName":"英语"},{"sName":"物理"},{"sName":"化学"},{"sName":"历史"}]

将这一串字符储存在数据库中，然后我们从数据库中查询到该字段并且返回（我这里为了方便测试直接用的servlet，框架同理）

			Course course = courseService.getCourseByTerm("1");
			response.setContentType("text/html; charset=utf-8");		
			String s = course.getSubject();
			response.getWriter().print(s);

然后在前端页面我们这么写，我用的是DOM
这是表单

	<table border="1px" id ="showAllInfo_table">
		<thead>
		
		</thead>
		
		<tbody>
			
		</tbody>
	
	</table>

这是JS

	<script>	
		$.ajax({
			url:"${path}/getCourseByTerm",
			success:function(result){
				var n = 0;
				var subjectArray = [];
				var info =JSON.parse(result);
				var tr = $("<tr></tr>");
				var td = null;	
				$.each(info,function(index,item){
					td = $("<td></td>")
					td.append(item.sName);
					tr.append(td);
				});
				tr.appendTo($("#showAllInfo_table thead"));
			}
		});
	</script>

这样我们就能达到动态改变主题的目的