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

来源：互联网发布：windows ant工具编辑：程序博客网时间：2024/04/28 22:54
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++;elsebreak;}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>
效果如图：
下面两张小图就是替换复选框的图片
JS操作html表格 添加行，清空行，获取值， 复选框换图片

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