<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div> <button>批量删除</button> </div> <table> <thead> <tr> <th><label><input type="checkbox" /></label></th> <th>学号</th> <th>姓名</th> <th>专业</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><label><input type="checkbox" /></label></td> <td>9527</td> <td>唐伯虎</td> <td>国画</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>007</td> <td>武松</td> <td>体育</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>1024</td> <td>诸葛亮</td> <td>心理学</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>1010</td> <td>刘义</td> <td>计算机</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>6969</td> <td>晨儿</td> <td>桑蚕技术</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>666</td> <td>章三</td> <td>小龙虾烹饪</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>5520</td> <td>里斯</td> <td>天文</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> <a href="#">尾页</a> <a href="#">下一页</a> <a href="#">上一页</a> <a href="#">首页</a> </td> </tr> </tfoot> </table> <script> 如何实现删除功能?
时间: 2023-07-09 07:52:34 浏览: 202
可以通过以下步骤实现删除功能:
1. 给每个“删除”按钮添加一个点击事件监听器。
2. 在事件监听器中获取被点击的行。
3. 从表格中移除该行。
代码示例:
```
$('button:contains("删除")').click(function() {
$(this).closest('tr').remove();
});
```
这段代码会给所有包含“删除”文本的按钮添加点击事件监听器。在监听器中,使用 `closest` 方法获取被点击按钮所在的行,并使用 `remove` 方法将其从表格中移除。
相关问题
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.bean.Sg" %> <%@ page import="com.dao.SgDao" %> <%@ page import="java.util.*" %> <%@ page import="com.dao.imp.SgDaoImp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link type="text/css" rel="stylesheet" href="../css/ww.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div id="center"> <div id="up"><h2>搜索</h2></div> <form action="doindex.jsp" method="post"> <h2 id="ziti">字段:</h2><select name="ziduan" title="选择字段"> <option value="sgzh" value="sgzh">宿管用户名</option> <option value="uname" value="id">ID</option> </select> <h2 id="ziti2">值:</h2><input type="text" id="zhi" name="zhi" > <button value="开始搜索" id="b1" >开始搜索</button> </form> <button value="添加宿管信息" id="b2">添加宿管信息</button> </div> <table> <tr> <td>ID</td> <td>用户名</td> <td>密码</td> <td>姓名</td> <td>性别</td> <td>联系电话</td> <td>操作</td> <td>操作</td> </tr> <% if(session.getAttribute("uname")==null){ response.sendRedirect("login.jsp"); } %> <% List<Sg> sa=new ArrayList<Sg>(); SgDao s=new SgDaoImp(); sa=s.getSgList(); for(Sg sta:sa) { %> <tr> <td><%=sta.getId() %></td> <td><%=sta.getUsername() %></td> <td><%=sta.getPassword() %></td> <td><%=sta.getName() %></td> <td><%=sta.getSex() %></td> <td><%=sta.getPhone() %></td> <td><button onclick="del()">删除</button></td> <td><button onclick="del()">修改</button></td> </tr> <% } %> </table> </body> </html>实现这个页面的查询功能和删除表格行功能
这个页面是一个简单的搜索和删除功能的表格页面。要实现搜索功能,你可以在form标签中添加一个提交按钮,当用户点击按钮时,将表单数据提交到后台进行查询操作。在后台处理查询操作的servlet或者jsp页面中,你可以获取表单提交的字段和值,然后根据这些条件进行数据库查询操作,将查询结果返回到前台页面进行展示。
要实现删除功能,你可以为每一行的删除按钮添加一个onclick事件,当用户点击删除按钮时,调用一个JavaScript函数进行删除操作。在这个JavaScript函数中,你可以获取到需要删除的行的相关数据,然后通过AJAX请求将这些数据发送到后台进行删除操作。在后台处理删除操作的servlet或者jsp页面中,你可以接收到前台发送的数据,然后根据这些数据进行数据库删除操作。
需要注意的是,这只是一个大致的实现思路,具体的实现还需要根据你的后台代码和数据库结构来进行适配。希望对你有所帮助!
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <style> html, body, #container { width: 100%; height: 100%; } #map-zoom, #map-center { color: #0288d1; } </style> <title>地图级别与中心点</title> </head> <body> <div id="container"></div> <div class="info"> <h4>获取地图级别与中心点坐标</h4> <p>当前级别:<span id="map-zoom">11</span></p> <p>当前中心点:<span id="map-center">121.498586,31.239637</span></p> </div> <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script> //初始化地图 var map = new AMap.Map('container', { zoom: 11, //初始地图级别 center: [121.498586, 31.239637], //初始地图中心点 }); //显示地图层级与中心点信息 function logMapinfo(){ var zoom = map.getZoom(); //获取当前地图级别 var center = map.getCenter(); //获取当前地图中心位置 document.querySelector("#map-zoom").innerText = zoom; document.querySelector("#map-center").innerText = center.toString(); }; //绑定地图移动与缩放事件 map.on('moveend', logMapinfo); map.on('zoomend', logMapinfo); </script> </body> </html> 转成vue2语法
可以将上述代码放在Vue组件的template和script标签中,如下所示:
```
<template>
<div>
<div id="container"></div>
<div class="info">
<h4>获取地图级别与中心点坐标</h4>
<p>当前级别:<span id="map-zoom">{{ zoom }}</span></p>
<p>当前中心点:<span id="map-center">{{ center }}</span></p>
</div>
</div>
</template>
<script>
import AMap from 'AMap';
import 'AMap/dist/AMap.css';
export default {
mounted() {
AMap.loadPlugin('AMap.Map', () => {
const map = new AMap.Map('container', {
zoom: 11,
center: [121.498586, 31.239637],
});
function logMapinfo() {
const zoom = map.getZoom();
const center = map.getCenter();
this.zoom = zoom;
this.center = center.toString();
}
this.zoom = map.getZoom();
this.center = map.getCenter().toString();
map.on('moveend', logMapinfo.bind(this));
map.on('zoomend', logMapinfo.bind(this));
});
},
data() {
return {
zoom: '',
center: '',
};
},
};
</script>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
#map-zoom, #map-center {
color: #0288d1;
}
</style>
```
在Vue组件中,首先通过import引入AMap,然后在mounted()方法中使用AMap.loadPlugin()加载地图插件。然后在回调函数中创建地图实例,并将其显示在页面中。接着定义一个函数logMapinfo()来获取地图的层级和中心点位置,并将其绑定到地图的移动和缩放事件上。同时,在Vue组件中定义了两个数据zoom和center,用来保存当前地图的层级和中心点位置,并将它们显示在页面上。注意,在logMapinfo()函数中,由于this指向了地图实例,需要使用bind()方法将this绑定到Vue实例上,以便在函数中访问到Vue组件的数据。最后,通过style标签设置页面样式。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044937.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="com.test.bean.Goods,java.util.ArrayList" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>购物车</title> <style type="text/css"> table{border-collapse:collapse;} td{border:1px solid black; text-align:center; } #deal{margin-left:200px} </style> </head> <body> <jsp:useBean id="cart" class="com.test.bean.Cart" scope="session"></jsp:useBean> <%if(cart==null||cart.getGoodslist().size()==0) out.println("购物车空空如也.....返回商品首页"); else{ ArrayList<Goods>goodslist=cart.getGoodslist(); %> 当前购物车共有<%=cart.getGcount() %>件物品 返回商品首页
序号 商品号 商品名称 价格 数量 小计 描述 <%for(int i=0;i<goodslist.size();i++){ Goods goods=goodslist.get(i); %> <%=i+1 %> <%=goods.getGid() %> <%=goods.getGname() %> <%= String.format("%.2f", goods.getGprice())%> <%=goods.getGcount() %> <%=String.format("%.2f", goods.getGprice()*goods.getGcount()) %> 删除 <%}%>
总计<%=String.format("%.2f",cart.getTotal())%> <input type="button" id="deal" value="购买" /></input> <%}%> <script type="text/javascript"> var dealbutton=document.getElementById("deal"); dealbutton.onclick=function(){ var cf=confirm("确定购买吗?"); if(cf==true){ window.location.href="Servlet/DealServlet"; } } </script> </body> </html> 修改删除功能,在购物车物品数量大于1的情况下点击“删除”时减少1个,等于1时删除此项商品;
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>人力资源管理系统</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> 人才信息 姓名 性别 年龄 职位 所学专业 工作经验 执行操作 we33 男 0 ew we ew 详细 删除 ds 女 0 ds ds ds 详细 删除 李四 男 36 JAVA架构师 计算机 5年 详细 删除 王五 男 28 软件测试工程师 计算机 三年 详细 删除 </body> </html>实现后端代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.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)