在业务系统中，用户与场地的多对多关系是典型场景，比如企业里多个员工可以预约使用多个会议室，一个会议室也可以被多个员工预约。要在HTML界面中管理这类关系，需要从数据结构设计、界面交互、数据同步三个方面入手。
核心数据结构设计
多对多关系需要中间表来维护关联，前端层面也需要对应的数据结构来存储关联关系。我们定义三个核心数据对象：
- 用户列表：存储所有用户的基础信息
- 场地列表：存储所有场地的基础信息
- 关联映射表：存储用户ID和场地ID的对应关系
示例数据结构如下：
// 用户列表
const userList = [
{ id: 1, name: '张三', department: '技术部' },
{ id: 2, name: '李四', department: '产品部' },
{ id: 3, name: '王五', department: '运营部' }
];
// 场地列表
const siteList = [
{ id: 101, name: '一号会议室', capacity: 10 },
{ id: 102, name: '二号会议室', capacity: 20 },
{ id: 103, name: '三号活动室', capacity: 50 }
];
// 关联映射表，存储用户ID和场地ID的对应关系
const relationMap = [
{ userId: 1, siteId: 101 },
{ userId: 1, siteId: 102 },
{ userId: 2, siteId: 101 },
{ userId: 3, siteId: 103 }
];界面展示设计
界面需要清晰展示两类信息：单个用户关联的场地列表，单个场地关联的用户列表。我们可以设计两个展示区域，分别用表格呈现。
用户关联场地展示
选择用户后，展示该用户关联的所有场地信息：
<div class="user-site-section">
<h3>用户关联场地</h3>
<select id="userSelect" onchange="renderUserSites()">
<option value="">请选择用户</option>
</select>
<table border="1" id="userSiteTable">
<thead>
<tr>
<th>场地ID</th>
<th>场地名称</th>
<th>场地容量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 动态渲染关联场地 -->
</tbody>
</table>
</div>场地关联用户展示
选择场地后，展示该场地关联的所有用户信息：
<div class="site-user-section">
<h3>场地关联用户</h3>
<select id="siteSelect" onchange="renderSiteUsers()">
<option value="">请选择场地</option>
</select>
<table border="1" id="siteUserTable">
<thead>
<tr>
<th>用户ID</th>
<th>用户名称</th>
<th>所属部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 动态渲染关联用户 -->
</tbody>
</table>
</div>关联操作实现
关联操作包括新增关联和移除关联，我们需要在界面上提供对应的操作入口，同时更新关联映射表的数据。
初始化下拉选项
页面加载时，将用户和场地的数据填充到对应的下拉选择框中：
// 初始化用户下拉框
function initUserSelect() {
const userSelect = document.getElementById('userSelect');
userList.forEach(user => {
const option = document.createElement('option');
option.value = user.id;
option.textContent = `${user.name}（${user.department}）`;
userSelect.appendChild(option);
});
}
// 初始化场地下拉框
function initSiteSelect() {
const siteSelect = document.getElementById('siteSelect');
siteList.forEach(site => {
const option = document.createElement('option');
option.value = site.id;
option.textContent = `${site.name}（容量：${site.capacity}人）`;
siteSelect.appendChild(option);
});
}
// 页面加载完成后初始化
window.onload = function() {
initUserSelect();
initSiteSelect();
};渲染用户关联场地
选择用户后，从关联映射表中筛选出对应用户的场地ID，再匹配场地详情渲染到表格中：
function renderUserSites() {
const userId = parseInt(document.getElementById('userSelect').value);
const tbody = document.getElementById('userSiteTable').querySelector('tbody');
tbody.innerHTML = '';
if (!userId) return;
// 筛选当前用户的关联场地ID
const relatedSiteIds = relationMap
.filter(item => item.userId === userId)
.map(item => item.siteId);
// 匹配场地详情
const relatedSites = siteList.filter(site => relatedSiteIds.includes(site.id));
// 渲染表格行
relatedSites.forEach(site => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${site.id}</td>
<td>${site.name}</td>
<td>${site.capacity}</td>
<td><button onclick="removeRelation(${userId}, ${site.id})">移除关联</button></td>
`;
tbody.appendChild(tr);
});
}新增关联功能
我们可以新增一个关联操作区域，选择用户和场地后点击按钮新增关联关系：
<div class="add-relation-section">
<h3>新增关联关系</h3>
<div>
<label>选择用户：</label>
<select id="addUserSelect"></select>
<label>选择场地：</label>
<select id="addSiteSelect"></select>
<button onclick="addRelation()">新增关联</button>
</div>
</div>对应的新增关联逻辑：
// 初始化新增关联的下拉框，复用之前的用户和场地数据
function initAddSelect() {
const addUserSelect = document.getElementById('addUserSelect');
const addSiteSelect = document.getElementById('addSiteSelect');
userList.forEach(user => {
const option = document.createElement('option');
option.value = user.id;
option.textContent = user.name;
addUserSelect.appendChild(option);
});
siteList.forEach(site => {
const option = document.createElement('option');
option.value = site.id;
option.textContent = site.name;
addSiteSelect.appendChild(option);
});
}
// 新增关联关系
function addRelation() {
const userId = parseInt(document.getElementById('addUserSelect').value);
const siteId = parseInt(document.getElementById('addSiteSelect').value);
// 检查是否已存在关联
const exist = relationMap.some(item => item.userId === userId && item.siteId === siteId);
if (exist) {
alert('该关联关系已存在');
return;
}
// 新增关联记录
relationMap.push({ userId, siteId });
alert('关联新增成功');
// 如果当前正在查看该用户或场地的关联，刷新展示
const currentUserId = parseInt(document.getElementById('userSelect').value);
const currentSiteId = parseInt(document.getElementById('siteSelect').value);
if (currentUserId === userId) renderUserSites();
if (currentSiteId === siteId) renderSiteUsers();
}移除关联功能
移除关联时，从关联映射表中删除对应的用户ID和场地ID的记录：
function removeRelation(userId, siteId) {
if (!confirm('确认要移除该关联关系吗？')) return;
// 找到对应记录的索引并删除
const index = relationMap.findIndex(item => item.userId === userId && item.siteId === siteId);
if (index > -1) {
relationMap.splice(index, 1);
alert('关联移除成功');
// 刷新展示
renderUserSites();
renderSiteUsers();
}
}数据同步说明
上述示例是在前端内存中维护关联数据，实际项目中需要将这些数据同步到后端。可以在关联新增或移除后，调用接口将更新后的relationMap提交到后端，或者只提交变更的单条记录。如果是从后端获取初始数据，只需要在页面初始化时调用接口获取用户列表、场地列表和关联映射表，替换本地的示例数据即可。
整个实现过程不需要复杂的框架，原生HTML、JavaScript就可以完成，对于简单的多对多关系管理场景完全够用，也可以根据需求扩展批量关联、关联查询等功能。