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属性不会被添加(比如:$(" ...
随机推荐
- Cocopod
装了好几天,这个是比较全面的,大家可以看看帮助一下 1.新建一个项目,名称:CPTest 2.打开终端,输入"cd"+空格,然后将文件夹拖入到后面 3.回车后继续输入vim Pod ...
- eclipse tomcat add and remove工程异常
1 eclipse导入工程后,右击server add and remove工程时,there are no resource: 解决方案:右击工程->单击property->选择pro ...
- 基于webdriver的jmeter性能测试-Eclipse+Selenium+JUnit生成jar包
续接 打开eclipse新建java项目,如下图所示: 输入项目名称后点击"完成"按钮,如下图所示: eclipse中新建一个java项目,如下图所示: 添加类库,如下图所示: 在 ...
- PHP定界符使用技巧
为什么要使用定界符 : 因为PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法——按字符串输出的话,肯定要有大量的转 ...
- 利用DOS批处理实现定时关机操作
10月1放假回来,寝室晚上10:30就停电了,最无法让人理解的是第二天早上8:00才来电.原来晚上电脑都是不关机的,开着WiFi一直到天亮,可是现在不行了,电脑如果一直开着第二天早上起来电脑肯定没电, ...
- bootstrap基本模板
<!DOCTYPE html><!--html5文档格式--> <html lang="zh-CN"><!--申明语言是中文简体--> ...
- wdk中ramdisk代码解读
入口函数,即驱动加载函数 NTSTATUS DriverEntry( IN PDRIVER_OBJECT DriverObject, IN PUNICODE_STRING RegistryPath ) ...
- 自己动手写一个简单的MVC框架（第二版）
一.ASP.NET MVC核心机制回顾 在ASP.NET MVC中,最核心的当属“路由系统”,而路由系统的核心则源于一个强大的System.Web.Routing.dll组件. 在这个System.W ...
- 【大型网站技术实践】初级篇：搭建MySQL主从复制经典架构
一.业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案 ...
- Go语言实战 - revel框架教程之MongDB的最佳搭档revmgo
由于revel框架本身对于model层的编写没有提供任何指导,所以在设计这部分的时候就有些犹豫,反复斟酌到底怎样才算是最佳实践. 我在做山坡网的时候刚开始也纠结了一下,拿不准mongodb的sessi ...