在JSP页面中点击复选框后,然后点击删除,批量对选中的数据进行删除,有没有JS代码?
我这个是我从我的代码里面直接给你截取的两个方法,用的是表格的形式排布的数据,选中复选框然后点击删除,就会删除整行的数据,当然这个仅仅是在页面上的显示删除,不涉及到数据库的哈,不过即使用到数据库,这个也差不多,就是把这些值传递到后台再进行操作。希望我的答案能让你解决问题哈
//点击删除按钮,删除被选择的信息
function delTrs(){
var trs = $("#dept input[type=checkbox]:checked").parents("tr");//这是选中所有复选框被选中的整行数据(多行)
if(confirm("是否删除")){
trs.remove();
}
}
//checkbox全选和全不选
function checkAllTr(e){
var cs = $("#dept input[type=checkbox]");
if(e.checked){
cs.attr("checked",true);
}else{
cs.attr("checked",false);
}
}
你批量删除是需要在数据库改数据,不是页面修改数据,如果只是不显示,的效果是可以做到的,但是刷新就会再次显示
如果是easyui的列表的话就是下面的方法其中的bsmid就是你要删除的id组成的字符串
var row = $('#tb').datagrid('getChecked');
var ids = "";
for(var i=0;i<row.length;i++){
ids +=row[i].BSM + ",";
}
var bsmid = ids.substring(0,ids.length-1);
其他的列表的话,做法类似
//批量删除
$("#deleteemail").click(function(){
if($("input[name='Snd']"))
{
var temp= document.getElementsByName("Snd");
var we =new Array()
for(var i=0;i<temp.length;i++){
if(temp[i].checked==true){
we[i]=temp[i].value;
}
}
//获得数组we
deleteData(we);
}
});
我现在把我的页面代码也贴给你,你试着自己写写,有不懂得再问我吧,不过我还是比较希望你能通过自己把弄懂!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color:#999;
font-size:25px;
}
div{
margin-top:50px;
width:1400px;
height:800px;
background-color:#FFC;
}
a{
color:red;
}
input[type="text"]{
width:180px;
height:30px;
color:blue;
font-size:20px;
}
button{
width:130px;
height:40px;
font-size:18px;
background-color:#69C;
}
table{
background-color:#CCC;
text-align:center;
}
</style>
<script src="../jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
//清空文本框信息
function init(){
$("#dno").val("");
$("#dname").val("");
$("#loc").val("");
$("#qdno").val("");
}
var otr;
//下面方法基本等同window.onload
$(document).ready(function(){
otr = $("#tr1").clone(true);
});
//添加新数据
function addTr(){
var newTr = otr.clone(true);
var childen = newTr.children();
childen.eq(1).text($("#dno").val());
childen.eq(2).text($("#dname").val());
childen.eq(3).text($("#loc").val());
newTr.appendTo($("#dept"));
init();
}
//点击“删除” 删除本条信息
function delTr(e){
var dtr = $(e).parents("tr");
if(confirm("是否删除")){
dtr.remove();
}
}
//点击删除按钮,删除被选择的信息
function delTrs(){
var trs = $("#dept input[type=checkbox]:checked").parents("tr");
if(confirm("是否删除")){
trs.remove();
}
}
var tds;
//修改 点击修改 数据在文本框显示,完成修改按钮显示,添加信息按钮隐藏
function updateTr(e){
var utr = $(e).parents("tr");
tds = utr.children();
var dno = $("#dno").val(tds.eq(1).text());
var dname = $("#dname").val(tds.eq(2).text());
var loc = $("#loc").val(tds.eq(3).text());
$("#ud1").attr("style", "display: block");
$("button:contains('点击添加信息')").hide();
}
//点击完成修改 按钮隐藏 添加按钮显示
function uocomplete(e){
tds.eq(1).text($("#dno").val());
tds.eq(2).text($("#dname").val());
tds.eq(3).text($("#loc").val());
init();
$(e).hide();
$("button:contains('点击添加信息')").show();
}
//checkbox全选和全不选
function checkAllTr(e){
var cs = $("#dept input[type=checkbox]");
if(e.checked){
cs.attr("checked",true);
}else{
cs.attr("checked",false);
}
}
//按部门号查询
function queryTr(){
var qdno = $("#qdno").val();
var tb1 = $("#dept").children();
if(qdno==10||qdno==20||qdno==30||qdno==""){
for(i=0;i<tb1.length;i++){
if(qdno==""){
tb1.eq(i).show();
}else if(tb1.eq(i).children().eq(1).text()!=qdno){
tb1.eq(i).hide();
}
init();
}
}else{
alert("此部门号不存在");
init();
}
}
</script>
</head>
<body>
<center>
<div>
<br>
请输入查询部门号:<input type="text" id="qdno" value="" >
<button id="qd1" onclick="queryTr()">点击查询</button><br/>
<p>
请输入部门号:<input type="text" id="dno" value="" >
请输入部门名:<input type="text" id="dname" value="" >
请输入部门地址:<input type="text" id="loc" value="" >
<button id="ud1" style="display:none" onclick="uocomplete(this)">确定修改</button>
</p>
<table border="1">
<caption>DEPT表</caption>
<thead>
<tr>
<th>全选/全部选<br><input type="checkbox" onchange="checkAllTr(this)"></th><th>部门号</th><th>部门名</th><th>部门地址</th><th>操作</th>
</tr>
</thead>
<tbody id="dept">
<tr id="tr1">
<td><input type="checkbox" name=""></td><td>10</td><td>销售</td><td>南京</td><td><a href="#" onclick="return delTr(this)">删除DEPT</a>/<a href="#" onclick="return updateTr(this)">修改DEPT</a></td>
</tr>
<tr >
<td><input type="checkbox" name=""></td><td>20</td><td>市场</td><td>南京</td><td><a href="#" onclick="return delTr(this)">删除DEPT</a>/<a href="#" onclick="return updateTr(this)">修改DEPT</a></td>
</tr>
<tr >
<td><input type="checkbox" name=""></td><td>30</td><td>人力资源</td><td>南京</td><td><a href="#" onclick="return delTr(this)">删除DEPT</a>/<a href="#" onclick="return updateTr(this)">修改DEPT</a></td>
</tr>
</tbody>
</table>
<br>
<button onclick="addTr()">点击添加信息</button>
<button onclick="delTrs()">点击删除</button>
</div>
</center>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../baselist.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<script type="text/javascript">
function deleteFee(){
var trs = $("#ec_table input[type=checkbox]:checked").parents("tr");
trs.remove();
}
</script>
序号 | 制单人 | 责任人 | 流程单据 | 单据编号 | 品号 | 品名 | 规格 | 预交日期 | 审核步骤 | 开始时间 | 结束时间 | 总共用时 | 允许用时 | 差异时间 | 状态 | |
${status.index+1} | ${d.billByName} | ${d.checkPeople} | ${d.flowBillName} | ${d.billId} | ${d.numList} | ${d.numName} | ${d.standard} | ${d.prepayTime} | ${d.flowName} | ${d.flowBegin} | ${d.flowEnd} | ${d.timeAll}小时 | ${d.timePermit}小时 | ${d.shortOfTime}小时${d.shortOfTime}小时 | ${d.check} | |
合计: | 这个时间段内共有数据${flowCountList}条 | 超时的数据为${flowTimeDataList}条 | 本阶段的完成率为${flowCompleteDataList } |