酷代码 AI
菜单
全部AI  /  热门  /  AI写代码神器
服务商

使用 jquery 创建一个待办事项列表应用程序,包含一个文本框和“添加”按钮。用户可以输入任务并点击“添加”按钮将其添加到列表中。还需要为每个任务添加“删除”按钮,点击后可以删除对应的任务

以下是一个使用 jQuery 创建待办事项列表应用程序的示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>待办事项列表</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> body { font-family: Arial, sans-serif; } ul { list-style-type: none; padding: 0; } li { padding: 10px; border: 1px solid #ccc; margin-bottom: 5px; } button { padding: 5px 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <h2>待办事项列表</h2> <input type="text" id="taskInput"> <button id="addBtn">添加</button> <ul id="todoList"> </ul> <script> $(document).ready(function () { $("#addBtn").click(function () { var taskText = $("#taskInput").val(); if (taskText!= "") { $("#todoList").append('<li>' + taskText + '<button class="deleteBtn">删除</button></li>'); $("#taskInput").val(""); } }); $(document).on("click", ".deleteBtn", function () { $(this).parent().remove(); }); }); </script> </body> </html> ``` 在上述代码中,当点击"添加"按钮时,如果输入框不为空,就会将输入的任务添加到列表中,并附带一个"删除"按钮。当点击"删除"按钮时,对应的任务项会被移除。 [2024-10-29 20:40:48 | AI写代码神器 | 499点数解答]

相关提问