关闭

JS操作html表格 添加行,清空行,获取值, 复选框换图片

标签: js动态创建表格复选框换图片
2762人阅读 评论(0) 收藏 举报
分类:

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' onfocus=\"this.className='text_focus'\" onblur=\"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' onclick='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" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" id="obj_id"/>
  <input type="button" name="button" id="button" value="添加" onclick="test(4)"/>
  <input type="button" name="button" id="button" value="获取值" onclick="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="清空" onclick="wipeData()" onmouseover="this.style.backgroundColor='#D9FFE2'" onmouseout="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" onclick="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>

效果如图:

下面两张小图就是替换复选框的图片


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:155172次
    • 积分:2356
    • 等级:
    • 排名:第16370名
    • 原创:72篇
    • 转载:11篇
    • 译文:2篇
    • 评论:87条
    最新评论
    haha
    haha