javaweb表单多选按钮生成徽章-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41294224/article/details/104889810

本文介绍如何在表格中使用Bootstrap的徽章样式来显示多选按钮，通过具体的HTML和JavaScript代码示例，展示了如何将人员信息的技能字段以徽章形式呈现，包括动态加载数据和响应式设计。

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

在表格中已bootstrap中徽章的形式显示多选按钮

表单部分：

<form>
	<input type="hidden" name="type" id="type" value="add">
	<div class="form-group">
		<label for="">编号</label> <input type="text" class="form-control"
		 id="id" name="id" required placeholder="">
	</div>
	<div class="form-group">
		<label for="">姓名</label> <input type="text" class="form-control"
		name="username" id="username" required placeholder="">
	</div>
	<div class="form-group  ">
		<label for="">部门</label>
		 <select class="dept form-control" id="dept" name="dept">
		</select>
	</div>
	<div class="form-group">
		<label for="">性别</label>
		<div id="sex" class="sex col"></div>
	</div>
	<div class="form-group">
		label for="">入职日期</label> <input type="date" 
		class="form-control" id="startdate" name="startdate">
	</div>
	<div class="form-group">
		<label for="">专业技能</label>
		<div id="skill" class="skill form-check"></div>
	</div>
	<button type="button" id="save" class="btn btn-block btn-success">保存</button>
</form>

js部分：

function loadData(){
	$.get('person',{type:'list'},(data)=>{
		let tr='';
		$.each(data,(i,item)=>{
			let dname='不详';
			if(item.dept.dept_name!=null){
				dname=item.dept.dept_name;
			}
			//多选框的字段
			let span='';
			$.each(item.skill,(i,items)=>{
				span+=`
				<span class="badge badge-primary">${items.skill_name}</span>
				`
			})
			tr+=`
				<tr>
					<td>${item.id}</td>
					<td>${item.username}</td>
					<td>${dname}</td>
					<td>${item.sex.sex_name}</td>
					<td>${item.startdate}</td>
					<td>${span}</td>
					<td>
						<button type="button" class="update btn btn-primary" data-toggle="modal" data-target="#exampleModal" value=${item.id}>修改</button>
						<button type="button" class="del btn btn-danger" value="${item.id}">删除</button>
					</td>
				
				</tr>
				`
				$('tbody').html(tr);
		})
		
	},'json')
}