js实现一个页面展示所有的任务链接,并且可以新建
时间: 2024-05-16 08:19:17 浏览: 14
可以使用以下代码来实现页面展示所有任务链接和新建功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>任务管理</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>任务列表</h1>
<ul id="task-list">
<!-- 任务链接会在这里动态生成 -->
</ul>
<h2>新建任务</h2>
<form id="new-task-form">
<input type="text" id="task-input" placeholder="输入任务名称" required>
<button type="submit">创建</button>
</form>
<script>
$(document).ready(function() {
// 任务列表数组,用于存储所有的任务
var tasks = [];
// 获取任务列表元素
var taskList = $('#task-list');
// 渲染任务列表
function renderTaskList() {
taskList.empty(); // 先清空原有内容
// 遍历任务数组,生成任务链接
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
var taskItem = $('<li></li>');
var taskLink = $('<a></a>').attr('href', '#').text(task);
taskItem.append(taskLink);
taskList.append(taskItem);
}
}
// 提交新建任务表单
$('#new-task-form').submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入的任务名称
var taskName = $('#task-input').val();
// 如果任务名称不为空,则添加到任务列表数组中,并重新渲染任务列表
if (taskName) {
tasks.push(taskName);
renderTaskList();
// 清空输入框
$('#task-input').val('');
}
});
// 初始化时渲染任务列表
renderTaskList();
});
</script>
</body>
</html>
```
这段代码通过使用 jQuery 来操作 DOM 元素,动态生成任务链接并实现新建任务的功能。你可以将代码保存为一个 HTML 文件,然后在浏览器中打开,即可看到页面上展示了任务列表和新建任务表单。当你输入任务名称并点击创建按钮时,会在任务列表中动态生成对应的任务链接。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)