<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以全选反选删除的表格</title>
<style type="text/css">
body,table
{
margin:0;
padding:0;
font-size:14px;
}
table,tr,th,td
{
border:1px solid #cdc;
}
th
{
background-color:green;
width:100px;
}
.oddColor
{
background-color:#ccc;
}
.evenColor
{
background-color:#fcf;
}
.overColor
{
background-color:#dff;
}
</style>
<script type="text/javascript">
//定义嵌套数组
var datas = [["张三", 30, "南昌"], ["李四", 25, "北京"], ["王五", 20, "郑州"],
["赵六", 19, "武汉"], ["李莫", 18, "深圳"], ["罗成", 33, "重庆"],
["王平", 31, "天津"], ["刘萍", 22, "上海"], ["杨丽", 17, "石家庄"],
["郭丽", 30, "广州"]];
//动态创建表格
function CreateMyTable() {
var tblMain = document.getElementById("tblMain");
var rowsCount = tblMain.rows.length;
var addRow;
var addCol;
var detailInfos;
for (var i = 0; i < datas.length; i++) {
addRow = tblMain.insertRow(rowsCount - 1);//控制数据行添加到倒数第二列
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='checkbox' name='item' />";
addCol.align = "center"; //控制列居中
detailInfos = datas[i];
for (var j = 0; j < detailInfos.length; j++) {
addCol = addRow.insertCell(-1);
addCol.innerHTML = detailInfos[j];
}
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='button' id='btnDel" + i + "' value='删除' onclick='btnDel(this)' />";
addCol.align = "center"; //控制列居中
rowsCount++;
}
TableColor();
}
//设置网格间隔色和高亮显示
var oldClassName; //记住行的背景色
function TableColor() {
var tblMain = document.getElementById("tblMain");
var rowNodes = tblMain.rows;
for (var i = 1; i < rowNodes.length-1; i++) { //除去首行和末行
if (i % 2 == 0) {
rowNodes[i].className = "evenColor";
}
else {
rowNodes[i].className = "oddColor";
}
rowNodes[i].onmouseover = function () {
oldClassName = this.className;
this.className = "overColor";
}
rowNodes[i].onmouseout = function () {
this.className = oldClassName;
}
}
}
//复选框全选函数
function checkAll() {
var currentCheckNode = event.srcElement;
var checkAllNodes = document.getElementsByName("all");
//把没有点击的全选复选框去除复选
for (var i = 0; i < checkAllNodes.length; i++) {
if (currentCheckNode != checkAllNodes[i]) {
checkAllNodes[i].checked = false;
}
}
var checkItemNodes = document.getElementsByName("item");
for (var i = 0; i < checkItemNodes.length; i++) {
checkItemNodes[i].checked = currentCheckNode.checked;
}
}
//按钮选择函数
function btnCheckboxSel(index) {
var checkItemNodes = document.getElementsByName("item");
for (var i = 0; i < checkItemNodes.length; i++) {
if (index == 2) {
checkItemNodes[i].checked = !checkItemNodes[i].checked;
}
else {
checkItemNodes[i].checked = index;
}
}
}
//每行的删除按钮函数
function btnDel(btn) {
var tblMain = document.getElementById("tblMain");
var delRowNode = btn.parentNode.parentNode;
var sMsg = "您是否要删除 姓名为:【" + delRowNode.cells[1].innerText + "】,年龄为:【" +
delRowNode.cells[2].innerText + "】,城市为:【" +
delRowNode.cells[3].innerText + "】 的数据?";
if (window.confirm(sMsg)) {
tblMain.tBodies[0].removeChild(delRowNode);
TableColor();
}
}
//删除所选项按钮函数
function btnDelSelectRow() {
var arrDel = new Array();
var pos = 0;
var itemNodes = document.getElementsByName("item");
for (var i = 0; i < itemNodes.length; i++) {
if (itemNodes[i].checked) {
arrDel[pos] = itemNodes[i].parentNode.parentNode;
pos++;
}
}
if (pos <= 0) {
return;
}
if (!window.confirm("是否要删除选择的数据?"))
return;
var tblMain = document.getElementById("tblMain");
for (var i = 0; i < arrDel.length; i++) {
tblMain.tBodies[0].removeChild(arrDel[i]);
}
}
window.onload = CreateMyTable;
</script>
</head>
<body>
<table id="tblMain" cellspacing="0" cellpadding="10px" align="center">
<tbody>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
<th colspan="4">
<input type="button" value="全选" onclick="btnCheckboxSel(1)" />
<input type="button" value="全清" onclick="btnCheckboxSel(0)" />
<input type="button" value="反选" onclick="btnCheckboxSel(2)" />
<input type="button" value="删除所选项" onclick="btnDelSelectRow()" />
</th>
</tr>
</tbody>
</table>
</body>
</html>
//js 数值是否在数组中
Array.prototype.in_array = function(e){
for(i=0;i<this.length;i++){
if(this[i] == e)
return true;
}
return false;
}
//js数组index
Array.prototype.find_str=function(string){
var str = this.join(“”);
return str.indexOf(string);
}
var houseIds=new Array();
$(“#chebox-list-all”).click(function(){
if($(“#chebox-list-all”).attr(“checked”)){
$(“[name=’checkboxes’]”).attr(“checked”,’true’);//全选
增加id
var ids = document.getElementsByName(‘checkboxes’);
var value = new Array();
for(var i = 0; i < ids.length; i++){
if(ids[i].checked)
houseIds.push(ids[i].value);
}
alert(houseIds);
}else{
$(“[name=’checkboxes’]”).removeAttr(“checked”);//反选
删除Ids
houseIds=[];
alert(houseIds);
}
})
//单选增加id
function check(obj){
if(!houseIds.in_array(obj.value)){
houseIds.push(obj.value);
alert(houseIds);
}else{
var index=houseIds.find_str(obj.value);
houseIds.splice(index, 1)
alert(houseIds);
}
}
javascript实现简单的全选和反选功能,javascript实现全选
本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下
效果图:
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
</head>
<body>
<input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="checkbox" id="flagCheck">
<ul id="checkboxList">
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
<p>
布尔属性,只要name即可,值可为空
checked,selected,readonly,disabled....
</p>
<script type="text/javascript">
//1.找节点
var allBtn = document.querySelectorAll("#all")[0];
var reverseBtn = document.querySelector("#reverse");
var flagCheck = document.getElementById("flagCheck");
var checkList = document.querySelectorAll("#checkboxList input");
function checkAll() {
for(var j = 0; j < checkList.length; j++) {
if(!checkList[j].checked) {
break;
}
}
if(j == checkList.length) {
// alert("全部为真")
flagCheck.checked = true;
}else {
// alert("至少一个不为真");
flagCheck.checked = false;
}
}
//2.加事件
//全选
allBtn.onclick = function() {
if(flagCheck.checked) {
flagCheck.checked = false;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = false;
}
}else {
flagCheck.checked = true;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = true;
}
}
}
//反选
reverseBtn.onclick = function() {
for(var i = 0; i < checkList.length; i++) {
if(checkList[i].checked) {
checkList[i].checked = false;
}else {
checkList[i].checked = true;
}
}
//执行检查所有checkList是否被选上了
checkAll();
}
for(var i = 0; i < checkList.length; i++) {
checkList[i].onclick = checkAll;
}
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
- 利用Vue.js实现checkbox的全选反选效果
- js实现checkbox全选、不选与反选的方法
- 两种不同的方法实现js对checkbox进行全选和反选
- js实现checkbox全选和反选示例
- 实现checkbox全选、反选、取消JavaScript小脚本异常
- jquery、js操作checkbox全选反选
- js操作CheckBoxList实现全选/反选(在客服端完成)
- Jquery CheckBox全选方法代码附js
checkbox全选反选代码 - javaScript checkbox
全选/反选及批量删除 - javascript
checkbox全选和反选的简单实现
您可能感兴趣的文章:
- 兼容ie和firefox版本的js反选 全选 多选框
- javaScript checkbox 全选/反选及批量删除
- javascript 全选/反选,取消选择效果
- Jquery CheckBox全选方法代码附js checkbox全选反选代码
- js 分页全选或反选标识实现代码
- js操作CheckBoxList实现全选/反选(在客服端完成)
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- js实现checkbox全选和反选示例
本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参…
效果展示: