通过bootstrap完成一个html表格+按钮。包括节点名称、阶段、任务类型、继承关系、是否准出、是否课题任务、默认模型等。可以提供添加、修改、删除任务模型的功能。
下面是一个使用Bootstrap完成的HTML示例，包括一个表格和按钮，实现了添加、修改和删除任务模型的功能。
<!DOCTYPE html>
<html>
<head>
<title>任务模型管理</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h1>任务模型管理</h1>
<hr>
<div class="row">
<div class="col-md-6">
<form id="taskForm" class="mb-3">
<div class="form-group">
<label for="nodeName">节点名称</label>
<input type="text" class="form-control" id="nodeName" required>
</div>
<div class="form-group">
<label for="stage">阶段</label>
<input type="text" class="form-control" id="stage" required>
</div>
<div class="form-group">
<label for="taskType">任务类型</label>
<input type="text" class="form-control" id="taskType" required>
</div>
<div class="form-group">
<label for="inheritance">继承关系</label>
<input type="text" class="form-control" id="inheritance" required>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isExit">
<label class="form-check-label" for="isExit">是否准出</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isProjectTask">
<label class="form-check-label" for="isProjectTask">是否课题任务</label>
</div>
<div class="form-group">
<label for="defaultModel">默认模型</label>
<input type="text" class="form-control" id="defaultModel" required>
</div>
<button type="submit" class="btn btn-primary">添加</button>
<button type="button" class="btn btn-secondary" id="updateBtn" disabled>修改</button>
<button type="button" class="btn btn-danger" id="deleteBtn" disabled>删除</button>
</form>
</div>
<div class="col-md-6">
<table class="table" id="taskTable">
<thead>
<tr>
<th scope="col">节点名称</th>
<th scope="col">阶段</th>
<th scope="col">任务类型</th>
<th scope="col">继承关系</th>
<th scope="col">是否准出</th>
<th scope="col">是否课题任务</th>
<th scope="col">默认模型</th>
</tr>
</thead>
<tbody>
<!-- 表格内容将通过JavaScript动态生成 -->
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
// 初始化表格数据
var taskData = [
{ nodeName: "节点1", stage: "阶段1", taskType: "类型1", inheritance: "继承关系1", isExit: true, isProjectTask: false, defaultModel: "模型1" },
{ nodeName: "节点2", stage: "阶段2", taskType: "类型2", inheritance: "继承关系2", isExit: false, isProjectTask: true, defaultModel: "模型2" }
];
loadTaskData();
// 提交表单时添加或更新任务模型
$("#taskForm").submit(function(event) {
event.preventDefault();
var nodeName = $("#nodeName").val();
var stage = $("#stage").val();
var taskType = $("#taskType").val();
var inheritance = $("#inheritance").val();
var isExit = $("#isExit").is(":checked");
var isProjectTask = $("#isProjectTask").is(":checked");
var defaultModel = $("#defaultModel").val();
if ($("#updateBtn").prop("disabled")) {
// 添加任务模型
var taskModel = {
nodeName: nodeName,
stage: stage,
taskType: taskType,
inheritance: inheritance,
isExit: isExit,
isProjectTask: isProjectTask,
defaultModel: defaultModel
};
taskData.push(taskModel);
} else {
// 更新任务模型
var rowIndex = $("#updateBtn").data("rowIndex");
taskData[rowIndex].nodeName = nodeName;
taskData[rowIndex].stage = stage;
taskData[rowIndex].taskType = taskType;
taskData[rowIndex].inheritance = inheritance;
taskData[rowIndex].isExit = isExit;
taskData[rowIndex].isProjectTask = isProjectTask;
taskData[rowIndex].defaultModel = defaultModel;
// 切换回添加按钮
$("#updateBtn").prop("disabled", true);
$("#deleteBtn").prop("disabled", true);
}
loadTaskData();
clearForm();
});
// 点击表格行时选中任务模型并启用修改和删除按钮
$("#taskTable").on("click", "tr", function() {
var rowIndex = $(this).index();
var taskModel = taskData[rowIndex];
$("#nodeName").val(taskModel.nodeName);
$("#stage").val(taskModel.stage);
$("#taskType").val(taskModel.taskType);
$("#inheritance").val(taskModel.inheritance);
$("#isExit").prop("checked", taskModel.isExit);
$("#isProjectTask").prop("checked", taskModel.isProjectTask);
$("#defaultModel").val(taskModel.defaultModel);
$("#updateBtn").prop("disabled", false).data("rowIndex", rowIndex);
$("#deleteBtn").prop("disabled", false);
});
// 点击删除按钮删除任务模型
$("#deleteBtn").click(function() {
var rowIndex = $("#updateBtn").data("rowIndex");
taskData.splice(rowIndex, 1);
loadTaskData();
clearForm();
$("#updateBtn").prop("disabled", true);
$("#deleteBtn").prop("disabled", true);
});
// 加载任务模型到表格
function loadTaskData() {
var tableBody = "";
for (var i = 0; i < taskData.length; i++) {
var taskModel = taskData[i];
tableBody += "<tr>";
tableBody += "<td>" + taskModel.nodeName + "</td>";
tableBody += "<td>" + taskModel.stage + "</td>";
tableBody += "<td>" + taskModel.taskType + "</td>";
tableBody += "<td>" + taskModel.inheritance + "</td>";
tableBody += "<td>" + (taskModel.isExit ? "是" : "否") + "</td>";
tableBody += "<td>" + (taskModel.isProjectTask ? "是" : "否") + "</td>";
tableBody += "<td>" + taskModel.defaultModel + "</td>";
tableBody += "</tr>";
}
$("#taskTable tbody").html(tableBody);
}
// 清除表单内容
function clearForm() {
$("#nodeName").val("");
$("#stage").val("");
$("#taskType").val("");
$("#inheritance").val("");
$("#isExit").prop("checked", false);
$("#isProjectTask").prop("checked", false);
$("#defaultModel").val("");
}
});
</script>
</body>
</html>
以上代码实现了一个任务模型管理界面，使用Bootstrap的样式，并通过JavaScript动态生成表格内容。用户可以在表单中输入任务模型的各个属性，并通过添加、修改和删除按钮进行相应操作
原文地址: http://www.cveoy.top/t/topic/iC10 著作权归作者所有。请勿转载和采集!