用这个ul来写一个增删改查的jq,有两个按钮一个是增加一个是删除
时间: 2024-03-07 16:47:53 浏览: 18
好的,以下是一个基本的增删改查的 jQuery 代码,使用 `ul` 元素来展示数据,和两个按钮来实现增加和删除操作:
HTML 代码:
```html
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="add">Add Item</button>
<button id="delete">Delete Item</button>
```
jQuery 代码:
```javascript
// 添加新项
$("#add").click(function() {
var item = prompt("Enter new item:");
$("#list").append("<li>" + item + "</li>");
});
// 删除选定项
$("#delete").click(function() {
$("#list li.selected").remove();
});
// 选中项高亮
$("#list").on("click", "li", function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
// 编辑选中项
$("#list").on("dblclick", "li", function() {
var item = prompt("Edit item:", $(this).text());
$(this).text(item);
});
```
解释:
- 当点击 "Add Item" 按钮时,弹出一个提示框,输入新的项,然后将其添加到 `ul` 中。
- 当点击 "Delete Item" 按钮时,删除当前选中的项。
- 当点击 `ul` 中的任意一项时,将其高亮,并取消其他项的高亮。
- 当双击某一项时,弹出一个提示框,修改该项的内容。