JQ实现简单的图书管理(增删)

首先看到第一张,上半部分一个提交对话框,下面一个列表,通过“添加图书”这个按钮将两部分链接在一起。 首先是上半部分:

当前有3本书

这里虽然明显看就是一个表单,但是我没有写form,应为没有实际的页面与WEB服务器交互过程
摘要由CSDN通过智能技术生成

要实现的就是这么一个简单的界面
在对话框中填入书名会添加在下面的列表中
点击列表中的删除键可以将所选项移除
如果不输入任何内容点击添加图书会弹出提醒
首先看到第一张,上半部分一个提交对话框,下面一个列表,通过“添加图书”这个按钮将两部分链接在一起。
首先是上半部分:

<label>请输入书名:</label> <input type="text">
    <p><button>添加图书</button> 当前有<span>3</span>本书</p>

这里虽然明显看就是一个表单,但是我没有写form,应为没有实际的页面与WEB服务器交互过程,但是在实际开发中应该是要写进去,这样比较专业;
然后是下半部分,有点基础的应该可以看出使用ul li写的,其实也可以用<div>,这里还是专业问题,虽然用<div>可以实现同

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个基本的增删改查的 jQuery 代码,使用 `ul` 元素和 `li` 元素来展示数据,并实现增加、删除、修改和查询操作: HTML 代码: ```html <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <input type="text" id="search"> <button id="add">Add Item</button> <button id="delete">Delete Item</button> <button id="edit">Edit 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"); }); // 编辑选中项 $("#edit").click(function() { var oldItem = $("#list li.selected"); var newItem = prompt("Edit item:", oldItem.text()); oldItem.text(newItem); }); // 查询项 $("#search").keyup(function() { var searchTerm = $(this).val().toLowerCase(); $("#list li").each(function() { var text = $(this).text().toLowerCase(); (text.indexOf(searchTerm) === -1) ? $(this).hide() : $(this).show(); }); }); ``` 解释: - 当点击 "Add Item" 按钮时,弹出一个提示框,输入新的项,然后将其添加到 `ul` 中。 - 当点击 "Delete Item" 按钮时,删除当前选中的项。 - 当点击 "Edit Item" 按钮时,弹出一个提示框,修改当前选中的项的内容。 - 当输入框中输入文本时,实时查询匹配结果,将不匹配的项隐藏,匹配的项显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值