当前位置: 58彩票app下载 > 计算机网络 > 正文

匹合作并单元格

时间:2019-09-18 11:15来源:计算机网络
效果与利益截图: html 代码: 先上效果图: 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""; html xmlns="; head title采纳货架号/title script type="text/javascript" src="01.js"/sc

效果与利益截图:
图片 1
html 代码:

先上效果图:

复制代码 代码如下:

图片 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>采纳货架号</title>
<script type="text/javascript" src="01.js"></script>
<style type="text/css">
#table1 td {
text-align:center;
width:15%;
}
#table2 td {
text-align:center;
width:15%;
background-color:#dcdcdc;
cursor:pointer;
}
</style>
<body>
<table id="table1" border="0" cellpadding="1" cellspacing="1" style="width: 100%">
<tr>
<td>货架</td>
<td>一层</td>
<td>二层</td>
<td>三层</td>
<td>四层</td>
<td>五层</td>
</tr>
</table>
<table id="table2" border="0" cellpadding="1" cellspacing="1" style="width:100%;">
<tr>
<td style="background-color:#ffffff;">A001</td>
<td id="td0" title="A001-1|11" style="background-color:#6699FF;"></td>
<td id="td1" title="A001-2|12" ></td>
<td id="td2" title="A001-3|13" ></td>
<td id="td3" title="A001-4|14"></td>
<td id="td4" title="A001-5|15"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A002</td>
<td id="td5" title="A002-1|21"></td>
<td id="td6" title="A002-2|22"></td>
<td id="td7" title="A002-3|23"></td>
<td id="td8" title="A002-4|24"></td>
<td id="td9" title="A002-5|25"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A003</td>
<td id="td10" title="A003-1|31"></td>
<td id="td11" title="A003-2|32"></td>
<td id="td12" title="A003-3|33"></td>
<td id="td13" title="A003-4|34"></td>
<td id="td14" title="A003-5|35"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A004</td>
<td id="td15" title="A004-1|41"></td>
<td id="td16" title="A004-2|42"></td>
<td id="td17" title="A004-3|43"></td>
<td id="td18" title="A004-4|44"></td>
<td id="td19" title="A004-5|45"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A005</td>
<td id="td20" title="A005-1|51"></td>
<td id="td21" title="A005-2|52"></td>
<td id="td22" title="A005-3|53"></td>
<td id="td23" title="A005-4|54"></td>
<td id="td24" title="A005-5|55"></td>
</tr>
</table>
</body>
</html>

CSS:

javascript 代码:

复制代码 代码如下:

复制代码 代码如下:

body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;}

var tdnum = 0;
var trid = "td";
// 键盘事件
document.onkeydown = function(event){
// 兼容 Mozilla Firefox
if (null == event) {
event = window.event;
}
if (event.keyCode == 13) {
p13key();
}
else if (event.keyCode <= 40 && event.keyCode >= 37) {
keytd(event.keyCode);
}
}
// 按下回车键
function p13key(){
var tdid = trid + tdnum;
var tdtitle = document.getElementById(tdid).getAttribute("title");
var pos = tdtitle.indexOf("|");
var seatname = tdtitle.substring(0, pos);
var seatid = tdtitle.substring(pos + 1, tdtitle.length);
window.alert(seatname + "," + seatid);
}
// 转变颜色
function setcolor(oldtd, newtd){
document.getElementById(oldtd).style.backgroundColor="#dcdcdc";
document.getElementById(newtd).style.backgroundColor="#6699FF";
}
// 完成切换功效主要代码
function keytd(key){
// 左
if (key == 37) {
--tdnum;
if (null == document.getElementById(trid + tdnum)) {
tdnum++;
return;
}
setcolor(trid + (tdnum + 1), trid + tdnum);
}
// 右
else if (key == 39) {
++tdnum;
if (null == document.getElementById(trid + tdnum)) {
tdnum--;
return;
}
setcolor(trid + (tdnum - 1), trid + tdnum);
}
// 上
else if (key == 38) {
tdnum = tdnum - 5;
if (null == document.getElementById(trid + tdnum)) {
tdnum = tdnum + 5;
return;
}
setcolor(trid + (tdnum + 5), trid + tdnum);
}
// 下
else if (key == 40) {
tdnum = tdnum + 5;
if (null == document.getElementById(trid + tdnum)) {
tdnum = tdnum - 5;
return;
}
setcolor(trid + (tdnum - 5), trid + tdnum);
}
}

.tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}
.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/seltab.gif) no-repeat;}
.splitx{overflow:hidden;position:absolute;height:3px;cursor:row-resize;background:red !important;filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1; }
.splity{overflow:hidden;position:absolute;width:3px;cursor:col-resize;background:red !important;filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1;}
#tabletitle{font-weight:bold;font-size:18px;height:30px;width:800px;margin:0 auto;text-align:center;font-family:宋体;line-height:30px;}
#tabletitle input{width:100%;border:0px;height:28px;line-height:30px;text-align:center;font-weight:bold;font-size:18px;font-family:宋体;}
.finelinetable{border-right:1px solid #000;border-top:1px solid #000;border-collapse:collapse;font-size:13px;width:800px;margin:0 auto;}
.finelinetable td{border-left:1px solid #000;border-bottom:1px solid #000;height:25px;}

您可能感兴趣的小说:

  • JS与jQuery遍历Table全数单元格内容的方法
  • JS使用for循环遍历Table的有所单元格内容
  • JS 达成Table一样行的单元格自动合併示例代码
  • 用js达成table单元格高宽调治,包容合併单元格(包容IE6、7、8、FF)实例
  • javascript 移动鼠标获得单元格所在table表中的rowIndex地点[兼容ie,firefox]
  • javascript table美化鼠标滑动单元格变色
  • 接纳js制作html table分页示例(js达成分页)
  • Js获取table当前tr行的值的代码
  • JS动态增多Table的T奥迪Q5,TD完结格局
  • js加多table的行和列 具体落到实处情势
  • JS获取Table中td值的主意
  • Js完成动态增加删减Table行示例
  • JS实现动态修改table及联合单元格的办法亲自去做

HTML:

复制代码 代码如下:

<body>
     <div id="tabletitle">表格标题</div>
     <table id="mainTable" class="finelinetable">
         <tr>
             <td colspan="8">1</td>
         </tr>
         <tr>
             <td rowspan="3">2</td>
             <td>3</td>
             <td colspan="3">4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
         </tr>
         <tr>
             <td>8</td>
             <td>9</td>
             <td>10</td>
             <td colspan="2">11</td>
             <td>12</td>
             <td>13</td>
         </tr>
         <tr>
             <td>14</td>
             <td colspan="3">15</td>
             <td>16</td>
             <td>17</td>
             <td>18</td>
         </tr>
         <tr>
             <td colspan="8"> </td>
         </tr>
         <tr>
             <td rowspan="3"> </td>
             <td> </td>
             <td colspan="2"> </td>
             <td> </td>
             <td colspan="3"> </td>
         </tr>
         <tr>
             <td> </td>
             <td colspan="2"> </td>
             <td> </td>
             <td colspan="3"> </td>
         </tr>
         <tr>
             <td style="height: 25px"> </td>
             <td colspan="2" style="height: 25px"> </td>
             <td style="height: 25px"> </td>
             <td colspan="3" style="height: 25px"> </td>
         </tr>
         <tr>
             <td> </td>
             <td colspan="7"> </td>
         </tr>
         <tr>
             <td colspan="2"> </td>
             <td colspan="6"> </td>
         </tr>
         <tr>
             <td colspan="2"> </td>
             <td colspan="6"> </td>
         </tr>
         <tr>
             <td colspan="2"> </td>
             <td colspan="6"> </td>
         </tr>
     </table>
 </body>

JS:

复制代码 代码如下:

//注释:获取对象.示例:$("objectId") 等同于 document.getElementById("objectId")
 if (typeof $ != "function") { var $ = function (ids) { return document.getElementById(ids) }; }
 //注释:获取坐标,parentNode最终节点.示例:absPos(object).x
 function absPos(_node, parentNode) { var x = y = 0; var node = _node; do { if (parentNode && node == parentNode) { break; } x += node.offsetLeft; y += node.offsetTop; } while (node = node.offsetParent); node = _node; return { 'x': x, 'y': y }; }
 function addEvent(object, event, func) { if (object.addEventListener) { /* W3C方法(DOM方法)上边语句中的false意思是用于冒泡阶段,即使true则是用来捕获阶段(IE不帮助捕获),所以这里用false是一边的来由是为了统一 */object.addEventListener(event, func, false); return true; } else if (object.attachEvent) { /* MSIE方法(IE方法) */object['e' + event + func] = func; object[event + func] = function () { object['e' + event + func](window.event); }; object.attachEvent('on' + event, object[event + func]); return true; } /*如三种办法都不具备则赶回false */return false; }
 //注释:剖断是不是是对象内子节点触发的onmouseover和onmouseout.示例:e = e || event;if (isMouseLeaveOrEnter(e, obj)) {}
 function isMouseLeaveOrEnter(e, handler) { if (e.type != 'mouseout' && e.type != 'mouseover') return false; var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; while (reltg && reltg != handler) reltg = reltg.parentNode; return (reltg != handler); }

 var table = $("mainTable");
 var tabEditDiv; //覆盖在table上的DIV
 var cellHide = [];//补充的rowspan,cellspan的格子
 var moveMode = "";//鼠标移动方式
 var moveArgs = []; //移动情势参数

 document.onselectstart = function(){return false;};
 addEvent(window,"resize",function(){loadTable();});

 $("tabletitle").ondblclick = function(){
     if(this.getElementsByTagName("input").length > 0){return;}
     this.innerHTML = "<input type='text' value='" + (this.innerHTML == "表格标题" ? "" : this.innerHTML) + "' />";
     var input = this.getElementsByTagName("input")[0];
     var _this = this;
     input.focus();
     input.onblur = function(){_this.innerHTML = this.value;}
     input.onkeydown = function (e) { var key = window.event ? window.event.keyCode : e.which; if (key == 13) this.blur(); };
 }

 function loadTable(){
     var tabPos = absPos(table);
     if(!tabEditDiv){
         tabEditDiv = document.createElement("div");
         document.body.appendChild(tabEditDiv);
     }
     tabEditDiv.style.cssText = "left:" + (tabPos.x - 15) + "px;top:" + (tabPos.y - 15) + "px;";
     tabEditDiv.className = "tabEditDiv";

     //全选Table按钮
     if(!seltab){
         var seltab = document.createElement("div");
         seltab.style.cssText = "width:15px;height:15px;left:" + (tabPos.x - 15) + "px;top:" + (tabPos.y - 15) + "px;";
         seltab.className = "seltab";
         seltab.onclick = function(){
             if(table.getAttribute("selected") == "1"){
                 table.removeAttribute("selected");
                 table.style.background = "";
                 this.style.width = "15px";
                 this.style.height = "15px";
             }else{
                 table.setAttribute("selected","1");
                 table.style.background = "#B6CAEB";
                 this.style.width = (table.clientWidth + 15) + "px";
                 this.style.height = (table.clientHeight + 15) + "px";
             }
         }
         document.body.appendChild(seltab);
     }
     loadTableEdit();
 } loadTable();

 function loadTableEdit(){ //加载可调动幅度及中度的div
     var tabPos = absPos(table);
     tabEditDiv.innerHTML = "";
     var cellcount = 0;
     var isadd = cellHide.length == 0;
     for(var i=0;i<table.rows.length;i++){
         for(var j=0;j<table.rows[i].cells.length;j++){
             var pos = absPos(table.rows[i].cells[j],table);
             if(!$("splitx_" + (pos.y + table.rows[i].cells[j].clientHeight))){ //加载可调动高度的div
                 var split = document.createElement("div");
                 split.id = "splitx_" + (pos.y + table.rows[i].cells[j].clientHeight);
                 split.className = "splitx";
                 split.style.cssText = "width:" + table.clientWidth + "px;left:15px;top:" + (pos.y + table.rows[i].cells[j].clientHeight - 1 + 15) + "px";
                 split.onmousedown = function(){
                     var index = this.getAttribute("index");
                     if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parseInt(this.id.split("_")[1]); for(var k=0;k<divs.length;k++){ if(divs[k].id.indexOf("splitx_") < 0) continue; if(parseInt(divs[k].id.split("_")[1]) < left) index++; } this.setAttribute("index",index);}else{index = parseInt(index);}
                     moveMode = "cellHeight";
                     moveArgs[moveArgs.length] = index;
                 }
                 tabEditDiv.appendChild(split);
             }
             if(j > 0){ //加载可调动幅度的div
                 if(!$("splity_" + pos.x)){
                     var split = document.createElement("div");
                     split.id = "splity_" + pos.x;
                     split.className = "splity";
                     split.style.cssText = "height:" + table.clientHeight + "px;top:15px;left:" + (pos.x - 2 + 15) + "px";
                     split.onmousedown = function(){
                         var index = this.getAttribute("index");
                         if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parseInt(this.id.split("_")[1]); for(var k=0;k<divs.length;k++){ if(divs[k].id.indexOf("splity_") < 0) continue; if(parseInt(divs[k].id.split("_")[1]) < left) index++; } this.setAttribute("index",index);}else{index = parseInt(index);}
                         moveMode = "cellWidth";
                         moveArgs[moveArgs.length] = index;
                     }
                     tabEditDiv.appendChild(split);
                 }
             }
             if(isadd){
                 loadHide();
             }
             table.rows[i].cells[j].onmousedown = function(){
                 //alert("x");
             }
         }
     }
 }

 function loadHide(){
     cellHide = [];
     var tempHide = [];
     for(var i=0;i<table.rows.length;i++){
         for(var j=0;j<table.rows[i].cells.length;j++){
             for(var k=1;k<table.rows[i].cells[j].rowSpan;k++){
                 cellHide[cellHide.length] = [i+k,j];
                 tempHide[tempHide.length] = [i+k,j];
             }
         }
     }
     for(var i=0;i<table.rows.length;i++){
         for(var j=0;j<table.rows[i].cells.length;j++){
             for(var k=1;k<table.rows[i].cells[j].colSpan;k++){
                 var yc = 0;
                 for(var l=0;l<tempHide.length;l++){
                     if(tempHide[l][0]==i&&tempHide[l][1]<j){yc++;}
                 }
                 for(var l=0;l<j;l++){
                     if(table.rows[i].cells[l].colSpan > 1){yc+=table.rows[i].cells[l].colSpan-1;}
                 }
                 cellHide[cellHide.length] = [i,j+k+yc];
             }
         }
     }
 }

 addEvent(document,"mousemove",function(e){
     e = e || window.event;
     if(moveMode == "cellWidth"){ //调度幅度

         var temp = moveArgs[0];
         var test = "";
         for(var i=0;i<table.rows.length;i++){
             var index = temp;
             for(var j=0;j<cellHide.length;j++){
                 if(i==cellHide[j][0] && temp>=cellHide[j][1]){index--;}
             }
             if(!table.rows[i].cells[index] || index < 0 || table.rows[i].cells[index].colSpan > 1){continue;}
             if(e.clientX > absPos(table.rows[i].cells[index]).x)
                 table.rows[i].cells[index].style.width = e.clientX

  • absPos(table.rows[i].cells[index]).x + "px";
             }
             loadTableEdit();
         }else if(moveMode == "cellHeight"){ //调整中度
             var index = moveArgs[0];
             for(var i=0;i<table.rows[index].cells.length;i++){
                 if(table.rows[index].cells[i].rowSpan > 1){continue;}
                 if(e.clientY > absPos(table.rows[index].cells[i]).y)
                     table.rows[index].cells[i].style.height = e.clientY
  • absPos(table.rows[index].cells[i]).y + "px";
             }
             loadTableEdit();
         }
     });
     addEvent(document,"mouseup",function(e){
         moveMode = ""; moveArgs = [];
     });
     addEvent(document,"mouseout",function(e){
         e = e || event;
         if (!isMouseLeaveOrEnter(e, this)) { return; }
         moveMode = ""; moveArgs = [];
     });

您大概感兴趣的小说:

  • JS与jQuery遍历Table全数单元格内容的艺术
  • JS使用for循环遍历Table的富有单元格内容
  • JS 实现Table同样行的单元格自动合并示例代码
  • javascript贯彻的选取方向键调整光标在table单元格中切换
  • javascript 移动鼠标得到单元格所在table表中的rowIndex地点[兼容ie,firefox]
  • javascript table美化鼠标滑动单元格变色
  • 运用js制作html table分页示例(js完结分页)
  • Js获取table当前tr行的值的代码
  • JS动态增添Table的TQashqai,TD达成情势
  • js增添table的行和列 具体达成情势
  • JS获取Table中td值的艺术
  • Js完毕动态增进删减Table行示例
  • JS完成动态修改table及统一单元格的主意亲自过问

编辑:计算机网络 本文来源:匹合作并单元格

关键词: