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属性不会被添加(比如:$(" ...
随机推荐
- js中字符串相关知识点总结
有引号就是字符串类型 空格也算长度 字符串的length不可写 typeof 判断数据类型 var s="a bcadde你好" // alert(typeof s) ...
- flex的兼容
父容器的 display 属性: .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit br ...
- pythonchallenge 解谜 Level 1
得到第一关地址后可以进行第一关的解析了. 看起来好神秘的样子.但是也就是把字母 k 变成 m , o 变成 q ,e 变成 g.将字母对应的ASCII的值+2就行了. #-*- coding:utf- ...
- <web Font的使用>
使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...
- Python 比较两个字符串大小
python 2中,有cmp(a,b)函数,用于比较两个字符串的大小. 如 >>>a='abc' >>>b='abd' >>>print cmp( ...
- 设计一个用于人事管理的People(人员)类
#include <iostream> #include <string> using namespace std; class Date //日期类 { private: i ...
- ant 自动化编译
bulid.xml配置: <?xml version="1.0" encoding="UTF-8" ?> <project name=&quo ...
- PreparedStatement的应用
package it.cast.jdbc; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql ...
- mac显示和隐藏文件
封装了一下显示和隐藏的脚本,方便mac上的文件隐藏和显示 if [ `defaults read com.apple.finder AppleShowAllFiles` = "1" ...
- Jexus 支持PHP的三种方式
Jexus不仅支持ASP.NET,而且能够通个自带的PHP-FCGI服务以及PHP-FPM等方式灵活支持PHP而且还可以以.NET(Phalanger)方式支持PHP. PHP-FCGI服务支持PHP ...