JSP页面中移除某个控件(例如:要移除<span></span>这行)

本文展示了一个使用JavaScript实现的简单函数,用于从DOM中移除指定元素,并附带一个测试用例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script>
function del(obj){
     obj.parentNode.removeChild(obj);
}
</script>
  
<span >
<input type="hidden" name="key" value="test"/>测试&nbsp;
    <a href='javascript:void(0);' onclick='del(this.parentNode);'>X</a>
</span>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% request.setCharacterEncoding("utf-8"); String contextPath = request.getContextPath(); %> <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>添加行政区划</title> <script type="text/javascript" src="<%=contextPath%>/js/comm/jquery-1.4.4.min.js"></script> <link href="<%=contextPath%>/css/min/insect_spore.css" rel="stylesheet" type="text/css" /> <link href="<%=contextPath%>/css/newxingyou/dialog.css" rel="stylesheet"> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } #result { width: 100%; font-size: 12px; } .z_index_8 { z-index: 8; } .z_index_99 { z-index: 80; } </style> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5MPXqVijsfPNiFQdifGtUNT7c9ekGkMF"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <style> Dialog{ height: 100vh; width: 100vw; } #mcgOptate{ display: flex; justify-content: space-around; } #mcgOptate button{ color: red; border: none; background-color: inherit; } .tab { display: flex; background-color: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .tab button { background-color: #f2f2f2; color: #333; border: none; outline: none; cursor: pointer; padding: 10px 20px; flex: 1; transition: all 0.3s ease-in-out; } .tab button.active, .tab button:hover { background-color: #3498db; color: #fff; } .tab button:hover{ background-color:#2ebb35; } .tabcontent { display: none; padding: 20px; border: 1px solid #ccc; border-top: none; border-radius: 0 0 5px 5px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow: auto; height: 100vh; } table { width: 100%; border-collapse: collapse; /* background: linear-gradient(to right, #ff416c, #ff4b2b);*/ border: 1px solid #333; border-radius: 10px; } th, td { padding: 5px; text-align: center; color: black; font-weight: bold; border: 1px solid blue; } th { background-color: #f25d11; } td { background-color: rgba(0, 150, 0,.2); } tr:nth-child(2n) { background-color: rgba(0, 148, 255,.8); } .pagination { display: inline-block; margin-bottom: 20px; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; } .pagination a.active { background-color: dodgerblue; color: white; } .pagination a:hover:not(.active) { background-color: #ddd; } </style> </head> <body> <input type="hidden" id="areaName" name="areaName" value="${areaName }"> <input type="hidden" id="siteName" name="siteName" value="${siteName }"> <input type="hidden" id="_aliasname" name="_aliasname" value="${_aliasname }"> <input type="hidden" id="centerSiteIp_Aliasname" name="centerSiteIp_Aliasname" value="${centerSiteIp_Aliasname }"> <input type="hidden" id="siteid" name="siteid"> <input type="hidden" id="contextPath" name="contextPath" value="<%=contextPath%>"> <div id="body_div" style="width: 100%; height: 100%; border: 1px solid #aaa;"> <div style="width: 100%; height: 20px; background: #eee; border: 1px solid #ccc; padding: 5px;"> 当前位置->性诱信息->地图GIS标记 <!-- 【共有<span id="_pointCount">0</span>个站点】 --> </div> <div id="allmap"></div>//用于挂栽地图 <img id="loading_Img" src="<%=contextPath%>/images/min/loading_ill1.gif" class="loading_Img" /> <%-- 表格操作按钮--%> <div style="display: none"> <div id="mcgOptate"> <button onclick="DataAn(this)">数据分析</button> </div> </div> <div id="DivLocker" class="hid_div" hidden="hidden"></div> <div id="mcgDialog"> <div class="overlay" id="overlay"></div> <div class="draggable-window" id="draggable"> <div class="draggable-header" > <div class="header-title">性诱信息</div> <span class="close-button" onclick="closeWindow()">×</span> </div> <div class="draggable-content" style="overflow: hidden"> </div> </div> </div> </div> <div id="mcgcDialog"> </div> <script src="<%=contextPath%>/css/newxingyou/draggableWindow.js"> </script> <script type="text/javascript"> var areaName; var pointArr; // 百度地图API功能 var map = new BMap.Map("allmap", { minZoom : 5, maxZoom : 26 }); // 创建Map实例,设置地图允许的最小/大级别 // 添加带有定位的导航控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor : BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type : BMAP_NAVIGATION_CONTROL_LARGE // 启用显示定位 //enableGeolocation: true }); map.addControl(navigationControl); var mapType1 = new BMap.MapTypeControl({ mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] }); var overView = new BMap.OverviewMapControl(); //var overViewOpen = new BMap.OverviewMapControl({ // isOpen : true, // anchor : BMAP_ANCHOR_BOTTOM_RIGHT //}); //添加地图类型和缩略图 map.addControl(mapType1); //2D图,卫星图 map.addControl(overView); //添加默认缩略地图控件 //map.addControl(overViewOpen); //右下角,打开 function getMapPoint() { var areaName = $("#areaName").val(); var centerSiteIp_Aliasname = $("#centerSiteIp_Aliasname").val(); $("#loading_Img").hide(); var points = eval("(" + '${list}' + ")"); //$("#_pointCount").text(pointArr.length); var point; if (points.length > 0 && points.length != "undefined") { var point = new BMap.Point(points[0].x, points[0].y); if (areaName == '国家') { map.centerAndZoom(point, 4); } if (areaName != '国家') { map.centerAndZoom(point, 8); } } else { point = new BMap.Point(105.680507, 34.865556); map.centerAndZoom(point, 4); alert("该地区暂无安装设备"); } map.enableScrollWheelZoom(); getBoundary(areaName, points); } setTimeout(function() { getMapPoint(); }, 500); function getBoundary(areaName, pointArr) { var bdary = new BMap.Boundary(); if (areaName != '国家') { bdary.get(areaName, function(rs) { //获取行政区域 map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight : 5, strokeColor : "#ff0000" }); //建立多边形覆盖物 ply.setFillColor("");//设置多边形的填充颜色,参数为合法的CSS颜色值。当参数为空字符串时,折线覆盖物将没有填充效果。 //ply.setFillOpacity(""); //设置多边形的填充透明度,取值范围0 - 1。 map.addOverlay(ply); //添加覆盖物 //map.setViewport(ply.getPath()); //调整视野 } getJsonData(pointArr); }); } else { getJsonData(pointArr); } } function getJsonData(pointArr) { for (var i = 0; i < pointArr.length; i++) { var _point = pointArr[i]; var site_name = _point.subSiteName; addMarker(_point); } } // 编写自定义函数,创建标注并绑定点击时间 function addMarker(_point) { var point = new BMap.Point(_point.x, _point.y); var marker = new BMap.Marker(point); var onlinestate = _point.onlinestate; var iconImg =""; if(onlinestate=="True"){ iconImg = $("#contextPath").val() + "/images/map/green.png"; }else{ iconImg = $("#contextPath").val() + "/images/map/gray.png"; } var myIcon = new BMap.Icon(iconImg, new BMap.Size(19, 25)); var marker = new BMap.Marker(point, { icon : myIcon, title: "(经度:"+_point.x+",纬度:"+ _point.y+")" }); //创建marker对象 marker.addEventListener("click", function(e) { infoWindowFun(this, _point); }); var opts = { position : point, // 指定文本标注所在的地理位置 offset : new BMap.Size(15, -15) //设置文本偏移量 }; var label = new BMap.Label(_point.subSiteName, opts); // 创建文本标注对象 label.setStyle({ color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily : "微软雅黑" }); map.addOverlay(label); map.addOverlay(marker); } function ShowImg(url){ const img=document.querySelector(".menv #showImg") img.addEventListener('click',()=>{ window.parent.frames["leftFrame"].location.href = url; this.closeWindow() $("#loading_Img").show(); }) } function infoWindowFun(_this, _point) { if (_point.id === 189) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing.jsp'; return; } if (_point.id === 190) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing2.jsp'; return; } if (_point.id === 191) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing3.jsp'; return; } if (_point.id === 192) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing4.jsp'; return; } var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '<h4 style="margin:10px 0 5px 0;padding:0.2em 0">' + _point.subSiteName + '</h4>' + '对不起,暂无数据...' + '</div>'; // 创建并打开信息窗口 var infoWindow = new BMap.InfoWindow(content); _this.openInfoWindow(infoWindow); } function showChangeDiv(url) { $("#cheackImg").val(url); //getMapPoint(); $('#DivLocker').addClass("z_index_99"); $('#DivLocker').show(); setTimeout(function() { $("#DHABGE_DIV").show(); }, 500); } function hideChangeDiv() { debugger $('#DivLocker').removeClass("z_index_99"); var _class = $('#DivLocker').attr("class"); if (_class == "hid_div") { $('#DivLocker').hide(); } $("#DHABGE_DIV").hide(); } function FunCheackImg() { debugger var url = $("#cheackImg").val(); window.parent.frames["leftFrame"].location.href = url; } function FunShowDetailDiv() { hideChangeDiv(); $('#DivLocker').addClass("z_index_99"); $('#DivLocker').show(); $("#DETAIL_DIV").show(); var siteName = $("#siteName").val(); var _aliasname = $("#_aliasname").val(); var iframSrc = $("#iframSrc").val(); iframSrc = iframSrc + "?siteName=" + encodeURI(siteName) + "&_aliasname=" + _aliasname; $("#light_form").attr("src", iframSrc); } function FunHideDetailDiv() { $('#DivLocker').removeClass("z_index_99"); var _class = $('#DivLocker').attr("class"); if (_class == "hid_div") { $('#DivLocker').hide(); } $("#DETAIL_DIV").hide(); } </script> </body> </html> 设置点击地图上任意监测点都显示</h4>' + '对不起,暂无数据...' + '</div>';并且除了if (_point.id === 189) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing.jsp'; return; } if (_point.id === 190) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing2.jsp'; return; } if (_point.id === 191) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing3.jsp'; return; } if (_point.id === 192) { window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing4.jsp'; return; }不做任何页面跳转
最新发布
06-22
$("#searchMechanism").click(function () { var provinceId = $("#province").val(); var cityId = $("#city").val(); $.ajax({ url:"/Fos/getList?provinceId=" + provinceId + "&cityId=" + cityId, contentType: "application/json;charset=utf-8", // 明确指定了 UTF-8 字符集 success:function(result){ // data = $.parseJSON(result); data = JSON.parse(result).sort((a,b) => a.city.localeCompare(b.city)); renderTable(); renderPagination(data); } }); }); // 动态生成表格核心逻辑 function renderTable() { const tbody = document.getElementById("tbody"); tbody.innerHTML = ""; // 清空旧数据 const currentData = getCurrentPageData(); // 创建文档片段提升性能 const fragment = document.createDocumentFragment(); currentData.forEach((item, index) => { const row = document.createElement("tr"); // 生成基础行内容 row.innerHTML = ` <td>${item.city}</td> <td>${item.fosname}</td> <td>${item.phone}</td> <td>${item.address}</td> <td>${item.worktime}</td> `; // 城市合并逻辑 if (index === 0 || item.city !== currentData[index-1].city) { const cityCell = row.querySelector("td:first-child"); let rowSpan = 1; // 计算连续相同城市的数量 for (let i = index + 1; i < currentData.length; i++) { if (currentData[i].city === item.city) rowSpan++; else break; } cityCell.rowSpan = rowSpan; } else { row.removeChild(row.firstElementChild); // 移除重复城市单元格 } fragment.appendChild(row); }); tbody.appendChild(fragment); } function createButton(text, isActive, isDisabled, targetPage) { return ` <button class="page-item ${isActive ? 'active' : ''}" ${isDisabled ? 'disabled' : ''} data-page="${targetPage}"> ${text} </button> `; } // 分页控件实现 start function renderPagination(data) { const totalPages = Math.ceil(data.length / pageSize); const pagination = document.getElementById("pagination"); const total = data.length; // 新增总页数显示模块 const totalInfo = ` <div class="page-info"> <span class="total-count">共 ${data.length} 条数据</span> <span class="total-pages">总 ${totalPages} 页</span> </div> `; // 生成页码按钮数组 const pages = generatePages(currentPage, totalPages); // 组合分页结构 pagination.innerHTML = ` <div class="pagination-container"> ${totalInfo} <div class="page-buttons"> ${createButton('«', false, currentPage === 1, currentPage - 1)} ${pages.map(p => p === '...' ? '<span class="ellipsis">...</span>' : createButton(p, p === currentPage, false, p) ).join('')} ${createButton('»', false, currentPage === totalPages, currentPage + 1)} </div> </div> `; } // 分页切换函数 function changePage(newPage) { // const totalPages = Math.ceil(data.length / pageSize); currentPage = Math.max(1, Math.min(newPage, totalPages)); renderTable(); renderPagination(data); } // 分页控件实现 end visibleEdges 首尾可见页码数 aroundCurrent 当前页前后可见页码数 function generatePages(currentPage, totalPages,visibleEdges = 2, aroundCurrent = 1) { const pages = []; const leftEnd = Math.min(visibleEdges, totalPages); const rightStart = Math.max(totalPages - visibleEdges + 1, leftEnd + 1); // 添加左边界页码 for (let i = 1; i <= leftEnd; i++) pages.push(i); // 计算中间区域 const midStart = Math.max(leftEnd + 1, currentPage - aroundCurrent); const midEnd = Math.min(rightStart - 1, currentPage + aroundCurrent); // 插入左省略号 if (midStart > leftEnd + 1) pages.push('...'); // 添加中间页码 for (let i = midStart; i <= midEnd; i++) pages.push(i); // 插入右省略号 if (midEnd < rightStart - 1) pages.push('...'); // 添加右边界页码 for (let i = rightStart; i <= totalPages; i++) pages.push(i); return pages.filter((v, i, arr) => arr[i] !== arr[i-1]); // 去重相邻重复项 } 帮我在这个基础上修改一下代码,并输出完整代码
05-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值