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属性不会被添加(比如:$(" ...
随机推荐
- WEB前端工程师(实践)制作天气预报难度:简单
需要准备:jQuery Bootstrap 天气预报API(本文中使用API可能会失效请灵活运用) CSS样式可以你自己去写这里只提出jQuery 请求数据和解析JSON数据 { "resu ...
- 把C#程序（含多个Dll）合并成一个Exe的超简单方法
开发程序的时候经常会引用一些第三方的DLL,然后编译生成的exe文件就不能脱离这些DLL独立运行了. 但是,很多时候我们本想开发一款只需要一个exe就能完美运行的小工具.那该怎么办呢? 下文介绍一种超 ...
- RunLoop（基本操作）
基本概念 -(void)runTimerInThread { //NSAutoreleasePool,没的用 [NSTimer scheduledTimerWithTimeInterval:1.0 t ...
- C++ 小知识积累
(1)setw和setfill函数 #include<iomanip> 代码: #include<iostream> #include<iomanip> using ...
- MySQL Can't connect to MySQL server on 'localhost' (10061)
run > services.msc > rightclick MySQL > properties >start 搞定
- js ---- 时间格式
Js获取当前日期时间及其它操作 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); ...
- JSP里面ajax不能返回后台传出的值得问题。。。。
问题代码: <%@ page contentType="text/html;charset=gb2312"%><html> <head> < ...
- C#刨根究底：《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Asp.Net MVC 分页、检索、排序整体实现
很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功 ...
- 进一步封装highchart，打造自己的图表插件：jHighChart.js
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...