后台管理系统 - 用户管理

<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-brand' href='#'>后台管理系统</a>
</div>
<ul class='nav navbar-nav'>
<li><a href='#'>首页</a></li>
<li><a href='#'>用户管理</a></li>
<li><a href='#'>输赢管理</a></li>
<li><a href='#'>寄生虫管理</a></li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li>
<a href='#'><span class='glyphicon glyphicon-user'></span>欢迎您，{{用户名}}</a>
</li>
<li>
<a href='http://127.0.0.1/'><span class='glyphicon glyphicon-log-out'></span>退出登录</a>
</li>
</ul>
</div>
</nav>
<div class='container'>
<h3>用户管理</h3>
<table class='table'>
<thead>
<tr>
<th>标签</th>
<th>部落名字</th>
<th>积分</th>
<th>状态</th>
<th>输赢</th>
</tr>
</thead>
<tbody>
<tr>
<td>#GY8P82V0</td>
<td>女神J大本营</td>
<td>-4</td>
<td>正常</td>
<td><button onclick='showDialog('女神J大本营')'>点我登记</button></td>
</tr>
<tr>
<td>#GY8P82V0</td>
<td>女神大本营</td>
<td>-4</td>
<td>正常</td>
<td><button onclick='showDialog('女神大本营')'>点我登记</button></td>
</tr>
</tbody>
</table>
</div>
<div id='dialog' style='display: none;'>
<form method='post'>
<label for='name'>姓名：</label>
<input type='text' name='name' id='name'><br>
<label for='age'>年龄：</label>
<input type='number' name='age' id='age'><br>
<button type='submit'>保存</button>
</form>
</div>
<!-- 弹窗的 HTML 代码 -->
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close'>&times;</span>
<h2>登记输赢</h2>
<p>请输入输赢情况：</p>
<textarea id='result'></textarea><br>
<button onclick='submitResult()'>提交</button>
</div>
</div>
<script>
function showDialog(name) {
var dialog = document.getElementById('dialog');
var nameInput = dialog.querySelector('#name');
var ageInput = dialog.querySelector('#age');
nameInput.value = name;
ageInput.value = ''; // 清空原有的值
dialog.style.display = 'block';
}
<p>var form = document.querySelector('#dialog form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var name = form.elements.name.value;
var age = form.elements.age.value;
// 在这里发送 POST 请求并进行处理
console.log('提交数据：', {name: name,
age: age});
// 关闭弹窗
var dialog = document.getElementById('dialog');
dialog.style.display = 'none';
});</p>
<p>// 获取弹窗
var modal = document.getElementById('myModal');</p>
<p>// 获取关闭按钮
var span = document.getElementsByClassName('close')[0];</p>
<p>// 点击关闭按钮，关闭弹窗
span.onclick = function() {
modal.style.display = 'none';
}</p>
<p>// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}</p>
<p>// 提交输赢结果
function submitResult() {
var result = document.getElementById('result').value;
console.log('输赢结果：', result);
// 在这里发送 POST 请求并进行处理
// ...
// 关闭弹窗
modal.style.display = 'none';
}
</script></p>