php对表格进行批量操作如全选反选删除功能
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Select All</title>
<style>
table{
border:#999 1px solid;
border-collapse:collapse;
}
table th{
text-align:center;
}
table td{
border:1px solid #999;
text-align:center;
}
.one{
background:#6cf;
}
.two{
background:#fc6;
}
</style> <script type="text/javascript" language="javascript">
function changecolor(){
var tr=document.getElementsByTagName("tr");
tr[0].style.background="#0066ff";
tr[tr.length-1].style.background="#0066ff";
}
function changebox(type) {
var tbs = document.getElementById("tbs");
var chks = tbs.getElementsByTagName("input");
switch (type) {
case "qx":
for (var i = 0; i < chks.length; i++) {
chks[i].checked = true;
}
break;
case "qxx":
for (var i = 0; i < chks.length; i++) {
chks[i].checked = false;
}
break;
case "fx":
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked == true) {
chks[i].checked = false;
} else {
chks[i].checked = true;
}
}
break;
}
}
function del(){
var input=document.getElementsByName("check[]");
for(var i=input.length-1; i>=0; i--){
if(input[i].checked==true){
var td=input[i].parentNode;
var tr=td.parentNode;
var table=tr.parentNode;
table.removeChild(tr);
}
}
}
</script>
</head>
<body onload="changecolor()">
<table width="400" border="0" align="center">
<tr>
<th>选项</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件附属信息</th>
</tr>
<tbody id="tbs">
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="two">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr class="one">
<td><input type="checkbox" name="check[]"></td>
<td>王大力</td>
<td>wdl@qq.com</td>
<td>个人邮箱</td>
</tr>
<tr>
<th>选项</th>
<td colspan="3" align="center">
<input type="button" id="qx" onclick="changebox('qx')" value="全选">
<input type="button" id="qxx" onclick="changebox('qxx')" value="取消全选">
<input type="button" id="fx" onclick="changebox('fx')" value="反选">
<input type="button" id="del" onclick="del()" value="删除选选附件">
</td>
</tr>
</tbody>
</table> </body>
</html>
php对表格进行批量操作如全选反选删除功能的更多相关文章
- Jquery 1.8全选反选删除选中项实现
JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...
- Vue-表单验证-全选-反选-删除-批量删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 比较全的JS checkbox全选、取消全选、删除功能代码
看下面两种实现方法: JS checkbox 方法一: 复制代码 代码如下: function checkAll() { var code_Values = document.all['code_Va ...
- JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0; ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- javascript总结41:表格全选反选,经典案例详解
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
随机推荐
- 【Postgresql】数据库函数
1.Postgresql查询前几条记录的SQL语句 select * from table where ...... LIMIT N ; 2.SQL limit integer offset int ...
- css解决display:inline-block;产生的缝隙（间隙）
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...
- javascript array sort()
[5,10,1].sort(); 结果[1,10,5] 有点出人意料. array.sort( sortFunction )可选-指定如何比较元素顺序的函数名称 如果省略sortFunction参数, ...
- dns解析慢 修改的参数
情况: ping域名时反应速度慢,ping ip却很正常 方法一:禁用ipv6 /etc/hosts中注释ipv6相关的 vim /etc/sysconfig/networks NETWORKING_ ...
- 后台PageVo中字段赋值与前台datagrid字段获取
后台PageVo中字段的geter与setter函数需根据pageVo的字段自动生成,前台字段与后台字段名保持一致. 数据返回到前台时,datagrid会根据字段名隐射到相应的getter与sette ...
- JSP页面之间互相传值
页面一: <s:if test="#list.sourceId==1"> <a ...
- cocos2d中各种action方法的应用
Action示例: 1.移动动作 cc.MoveBy:create(time, posX, posY) 在time时间内,相对当前位置基础上移动x,y个单位. cc.MoveTo:create(ti ...
- Handlebars.js的学习
写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...
- 热门的PHP框架
每个PHP框架都拥有各自独特的地方.同时PHP语言已经获得了巨大的认同并且成为了世界上最通用的服务器脚本语言.PHP也俨然成为了最容易学习的web动态开发语言.在PHP发展的同时,PHP框架也迅速崛起 ...
- java入门第三步之数据库连接
数据库连接可以说是学习web最基础的部分,也是非常重要的一部分,今天我们就来介绍下数据库的连接为下面学习真正的web打下基础 java中连接数据库一般有两种方式: 1.ODBC——Open Datab ...