Js操作html表格，这个复选框换图标我是把复选框样式 display：none，然后触发图片的点击事件去关联checkbox
代码如下：
<!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">
.test {
clear: left;
float: left;
height: 400px;
width: 640px;
border: 1px solid #00E3E3;
overflow-y:auto;
}
table{
border:1px solid #848484;
border-collapse: collapse;
width: 100%;
}
th {
background-color: #F2F2F2;
border:1px solid #848484;
height: 26px;
}
td{
border:1px solid #848484;
height: 26px;
text-align: center;
}
.sblb{
background-color: #A6FFFF;
border:1px solid #00E3E3;
height: 28px;
padding: 3px;
color: #000040;
border-right-width: 0px;
}
.c_regist_td{
padding-left: 5px;
text-align: left;
}
#regist_th{
padding-left: 5px;
text-align: left;
}
.qk{
background-color: #A6FFFF;
border:1px solid #00E3E3;
height: 28px;
padding: 3px;
color: #000040;
border-left-width: 0px;
}
.wipeBtn{
background-color: #00E3E3;
border: 1px solid #848484;
cursor: pointer;
}
.text_ep{
border:1px solid #797A75;
height:20px;
}
.text_focus{
border:2px solid #B0B0FF;
height:20px;
}
</style>
<script type="text/javascript">
function operate(){
alert("配置");
}
/*
C++后台传数据到Html
*/
function cppDataToHtml(jsonArr){
//var objArr = eval('(' + jsonArr + ')');
var objArr = jsonArr;
var table = document.getElementById("tb");
for(var i = 0; i < objArr.length; i++){
//插入一行
var row = table.insertRow(table.rows.length);
var row_id = objArr[i].id;
row.id = row_id; //行ID（对象ID）
//品牌
var cell_brand = row.insertCell(row.cells.length);
cell_brand.innerHTML = objArr[i].brand;
//设备
var cell_equipment = row.insertCell(row.cells.length);
cell_equipment.innerHTML = objArr[i].equipment;
//IP地址
var cell_ipAddress = row.insertCell(row.cells.length);
cell_ipAddress.innerHTML = objArr[i].ipAddress;
//通道
var cell_channel = row.insertCell(row.cells.length);
cell_channel.innerHTML = objArr[i].channel;
//设备名称
var cell_equipmentName = row.insertCell(row.cells.length);
var equipmentNameStr = "<input name='equipmentName' class='text_ep' οnfοcus=\"this.className='text_focus'\" οnblur=\"this.className='text_ep'\" type='text' value='" + objArr[i].equipmentName + "'/>";
cell_equipmentName.innerHTML = equipmentNameStr;
//注册
var cell_isRegist = row.insertCell(row.cells.length);
var registStr = "<input type='checkbox' style='display:none' οnclick='toChkSon(this.checked);' id='rcb_" + row_id + "'";
if(objArr[i].isRegist == true){
registStr += " checked='checked'";
}
cell_isRegist.innerHTML = registStr + "/><img src='checkOff.png' width='12' height='12' onClick='toChkSon(\"rcb_" + row_id + "\",this);'/> 注册";
cell_isRegist.className = "c_regist_td";
//操作
var cell_operate = row.insertCell(row.cells.length);
cell_operate.innerHTML = "<a href='javascript: operate();'>配置</a>";
}
}
/**
* 操作全选复选框事件
**/
function doCheck(id)
{
var inputs=document.getElementsByTagName("input");
var obj = document.getElementById(id);
var images = document.getElementsByTagName("img");
if(!obj.checked){
obj.checked = true;
}else{
obj.checked = false;
}
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type == "checkbox" && inputs[i].id != "registCheckbox") //刷选出所有复选框
{
inputs[i].checked=obj.checked;
}
}
if(obj.checked){
for(var i = 0; i < images.length; i++){
images[i].src = "checkOn.png";
}
}else{
for(var i = 0; i < images.length; i++){
images[i].src = "checkOff.png";
}
}
}
/**
* 复选框变化 全选按钮变化
**/
function toChkSon(checkboxId, imageObj)
{
var obj = document.getElementById(checkboxId);
if(!obj.checked){
obj.checked = true;
imageObj.src = "checkOn.png";
}else{
obj.checked = false;
imageObj.src = "checkOff.png";
}
if(!obj.checked) //当此复选框未选中 全选为未选
{
document.getElementById("registCheckbox").checked=false;
document.getElementById("registImg").src="checkOff.png";
return ;
}
var chkInputs=getCheckBox(); //获取所有复选框
var j=0;
for(var i=0;i<chkInputs.length;i++)
{
if(chkInputs[i].checked==obj.checked)
j++;
else
break;
}
if(j==chkInputs.length){ //当所有复选框为同一状态时 赋值全选同一状态
document.getElementById("registCheckbox").checked=obj;
var images = document.getElementsByTagName("img");
if(obj){
for(var i = 0; i < images.length; i++){
images[i].src = "checkOn.png";
}
}else{
for(var i = 0; i < images.length; i++){
images[i].src = "checkOff.png";
}
}
}
}
/**
* 获取所有复选框
**/
function getCheckBox()
{
var inputs=document.getElementsByTagName("input");
var chkInputs=new Array();
var j=0;
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type == "checkbox" && inputs[i].id != "registCheckbox") //刷选出所有复选框
{
chkInputs[j]=inputs[i];
j++;
}
}
return chkInputs;
}
/**
* 获取Html列表所有值对象
*/
function getObjArr(){
var tb=document.getElementById("tb");
var rows=tb.rows;
var objArr = new Array();
var obj;
for(var i = 2;i < rows.length; i++){
obj = new Object();
var cells = rows[i].cells;
if(cells.length > 0){
obj.id = rows[i].id;
obj.brand = cells[0].innerHTML;
obj.equipment = cells[1].innerHTML;
obj.ipAddress = cells[2].innerHTML;
obj.channel = cells[3].innerHTML;
obj.equipmentName = cells[4].firstChild.value;
obj.isRegist = cells[5].firstChild.checked;
objArr[i-2] = obj;
}
}
return objArr;
}
function alertData(){
var objArr = getObjArr();
var str = "";
for(var i = 0; i < objArr.length; i++){
str += "id:" + objArr[i].id + objArr[i].brand + objArr[i].equipment + objArr[i].ipAddress + objArr[i].channel + objArr[i].equipmentName + objArr[i].isRegist + "\n";
}
alert(str);
}
function test(str){
var len = document.getElementById("obj_id").value;
cppDataToHtml(createObjArr(len));
}
function createObjArr(len){
var arr = new Array();
var obj;
for(var i = 0; i < len; i++){
obj = new Object();
obj.id = i+1;
obj.brand = "汉邦";
obj.equipment = "DVR";
obj.ipAddress = "192.168.16.16";
obj.channel = i+1;
obj.equipmentName = "摄像0" + (i + 1) + "（汉邦通道" + (i+1) + "）";
obj.isRegist = false;
arr[i] = obj;
}
return arr;
}
function wipeData(){
var table=document.getElementById("tb");
var len=table.rows.length;
for(var i=2;i<len;i++){
table.deleteRow(2);
}
}
</script>
</head>
<body>
<div> <input type="text" οnkeyup="this.value=this.value.replace(/[^\d]/g,'')" id="obj_id"/>
<input type="button" name="button" id="button" value="添加" οnclick="test(4)"/>
<input type="button" name="button" id="button" value="获取值" οnclick="alertData()"/></div>
<div class="test">
<table id="tb" border="1">
<tr id="head">
<th colspan="6" align="left" class="sblb">设备列表</th>
<th class="qk"><input type="button" class="wipeBtn" value="清空" οnclick="wipeData()" οnmοuseοver="this.style.backgroundColor='#D9FFE2'" οnmοuseοut="this.style.backgroundColor='#00E3E3'"/></th>
</tr>
<tr id="title">
<th scope="col">品牌</th>
<th scope="col">设备</th>
<th scope="col">IP地址</th>
<th scope="col">通道</th>
<th scope="col">设备名称</th>
<th width="110px" id="regist_th" scope="col"><input type="checkbox" style="display:none" id="registCheckbox" οnclick="doCheck(this)"><img id="registImg" src="checkOff.png" width="12" height="12" onClick="doCheck('registCheckbox');"> 注册到网络</th>
<th scope="col" width="60px">操作</th>
</tr>
</table>
</div>
</body>
</html>
效果如图：
下面两张小图就是替换复选框的图片
扫一扫
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
