急,我想用网页实现如图的操作~javascript(dom操作)
发布网友
发布时间：2022-04-07 09:27
共3个回答
热心网友
时间：2022-04-07 10:56
<html>
<head>
<title></title>
<style type="text/css">
#d0 {background-color:#ccc;width:55%;height:55%}
table {margin:2%;border:solid blue 1px;width:95%;height:95%;background-color:#139E9B}
td {border:solid blue 1px;padding:1px;}
.d1 {background:#0200FC;width:100%;height:50%;font-size:0px}
.d2 {background:#FCFF85;width:100%;height:50%;font-size:0px}
</style>
<script type="text/javascript">
var myTd = document.getElementsByTagName("td");
var selectedTd = myTd[0];
function init() {
for(i=0; i<myTd.length; i++) {
myTd[i].selected = false;
myTd[i].divHeight = 50;
}
}
function setMark(obj) {
for(i=0; i<myTd.length; i++) {
if(myTd[i].selected == true) {
myTd[i].selected = false;
break;
}
}
obj.selected = true;
}
function changeHeight(e) {
var j;
var m = document.getElementsByTagName("tr").length;
var n = myTd.length;
var x = n/m;
if(e.keyCode)
keycode = e.keyCode;
else
keycode = e.which;
for(i=0; i<n; i++) {
if(myTd[i].selected == true) {
selectedTd = myTd[i];
j = i;
break;
}
}
if(keycode == 107) {
if(selectedTd.divHeight > 0) {
selectedTd.divHeight -= 10;
myHeight = selectedTd.divHeight+"%";
selectedTd.firstChild.style.height = myHeight;
myHeight = 100 - selectedTd.divHeight;
myHeight = myHeight+"%";
selectedTd.lastChild.style.height = myHeight;
}
} else if(keycode == 109) {
if(selectedTd.divHeight < 100) {
selectedTd.divHeight += 10;
myHeight = selectedTd.divHeight+"%";
selectedTd.firstChild.style.height = myHeight;
myHeight = 100 - selectedTd.divHeight;
myHeight = myHeight+"%";
selectedTd.lastChild.style.height = myHeight;
}
} else {
switch(keycode)
{
case 37: //向左
if(j%x == 0) {
myTd[j].selected = false;
myTd[j-1+x].selected =true;
} else {
myTd[j].selected = false;
myTd[j-1].selected =true;
}
break;
case 38: //向上键
if(j < x) {
myTd[j].selected = false;
myTd[j+x*(m-1)].selected =true;
} else {
myTd[j].selected = false;
myTd[j-x].selected =true;
}
break;
case 39: //右键
if((j+1)%x == 0) {
myTd[j].selected = false;
myTd[j+1-x].selected =true;
} else {
myTd[j].selected = false;
myTd[j+1].selected =true;
}
break;
case 40: //向下键
if(j >= (n-x)) {
myTd[j].selected = false;
myTd[j-x*(m-1)].selected =true;
} else {
myTd[j].selected = false;
myTd[j+x].selected =true;
}
break;
default:
break;
}
}
}
</script>
</head>
<body onKeyDown="changeHeight(event);" onload="init();">
<div id="d0">
<table cellspacing="7px">
<tr>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
</tr>
<tr>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
</tr>
<tr>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
<td onMousedown="setMark(this);"><div class="d1"></div><div class="d2"></div></td>
</tr>
</table>
</div>
</body>
</html>
热心网友
时间：2022-04-07 12:14
// JavaScript Document
(function(){
//需定义每行表格数量
ctn = 16;
//定义左右两个层的ID
var leftdiv = document.getElementById('left');
var rightdiv = document.getElementById('right');
//左层主表格
var t = leftdiv.getElementsByTagName('table');
var tl = t.length;
//右侧附属表格
var tson = rightdiv.getElementsByTagName('table');
var tsonl = tson.length;
//检测两边是否相等
if(tl!=tsonl){alert('主副表内表格数量不等！');return;}
//当前表格、上表格、下表格、按键
// + = 187; - = 189; l = 37; u = 38; r = 39; d = 40;
var v = ''
var up = '',sonup = '';
var dn = '',sondn = '';
var key = '';
//记录当前位置
var vid = 0;
var vsid = 0;
//遍历
for(i=0;i<tl;i++){
var cur=t[i];
cur.onclick = function(){var n=this; return getcur(n);};
tson[i].onclick = function(){alert('附表无法选择');}
}
function getcur(obj){
var e = obj;
e.className = 'sel';
//清空其他表格的样式
for(i=0;i<tl;i++){
if(t[i]!=e){t[i].className='';}else{vid=i;vsid=i;/*获取当前表格的位置*/}
}
//获取上下两个表格
var td = e.getElementsByTagName('td');
var tdl = td.length;
var tdson = tson[vsid].getElementsByTagName('td');
for(i=0;i<tdl;i++){
if(td[i].className=='y'){
dn = td[i];
sondn = tdson[i];
}
else{
up = td[i];
sonup = tdson[i];
}
}
v = e;
//为up和dn添加height
dn.style.height = '100';
up.style.height = '100';
sondn.style.height = '100';
sonup.style.height = '100';
}
//键盘事件
document.onkeydown = function(){
key=event.keyCode;
switch(key){
case 187:
add();break;
case 189:
dec();break;
case 37:
l();break;
case 38:
u();break;
case 39:
r();break;
case 40:
d();break;
default : break;
}
}
//操作
function add(){
if(v){
//初始化色彩
up.style.background = '#ffffff';
dn.style.background = '#ffff00';
v.style.background = '';
var uh = parseInt(up.style.height.toString());
var dh = parseInt(dn.style.height.toString());
uh = uh - 10;
dh = dh + 10;
if(uh<1){uh=1;dh=dh-1;}
//执行
up.style.height = uh.toString();
dn.style.height = dh.toString();
sonup.style.height = uh.toString();
sondn.style.height = dh.toString();
}
else{
alert('please select a table');
}
}
function dec(){
if(v){
//初始化色彩
up.style.background = '#ffffff';
dn.style.background = '#ffff00';
v.style.background = '';
var uh = parseInt(up.style.height.toString());
var dh = parseInt(dn.style.height.toString());
uh = uh + 10;
dh = dh - 10;
if(dh<1){dh=1;uh=uh-1;}
//执行
up.style.height = uh.toString();
dn.style.height = dh.toString();
sonup.style.height = uh.toString();
sondn.style.height = dh.toString();
}
else{
alert('please select a table');
}
}
function l(){
var g = vid - 1;
if(g>=0){
v = t[g];
vid = g;
getcur(v);
}
}
function r(){
var g = vid + 1;
if(g<=(tl-1)){
v = t[g];
vid = g;
getcur(v);
}
}
function u(){
var g = vid - ctn + 1;
if(g>=0){
v = t[g];
vid = g;
getcur(v);
}
}
function d(){
var g = vid + ctn - 1;
if(g<=(tl-1)){
v = t[g];
vid = g;
getcur(v);
}
}
})();
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
div{width:300px; float:left;margin-right:10px;}
.clear{clear:both;}
table{float:left; margin-bottom:6px;width:18px; margin-right:2px; border:#ccc 1px solid; cursor:hand;}
td{height:100px; line-height:1px;}
.y{background-color:#FFFF00;}
.sel{border:#ff0000 1px solid;}
</style>
</head>
<body>
<div class="clear"></div>
<div id="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="y"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="y"> </td>
</tr>
</table>
</div>
<div id='right'>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="y"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td class="y"> </td>
</tr>
</table>
</div>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
热心网友
时间：2022-04-07 13:49
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ldh_web_editor </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="mfx.css" rel="stylesheet" type="text/css">
<script src="mfx.js"></script>
<style>
body{background:#fff}
.google{height:100px;float:left;border:2px solid #000; }
.google th{font-size:0px;overflow:hidden;width:20px}
.google .up{background:#0500FC;height:50%; }
.google .down{background:#FCFF85;height:50% }
.google.selected{border:2px dashed red;}
</style>
</head>
<body>
<table id="googleBox">
<tr>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
</tr>
<tr>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
</tr>
<tr>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
<td><table class="google"><tr><th class="up"> </th></tr><tr><th class="down"> </th></tr></table></td>
</tr>
</table>
</body>
<script language="javascript">
CSS = function(el) {
return el.currentStyle || document.defaultView.getComputedStyle(el, null);
};
var box=document.getElementById("googleBox");
var tables=box.getElementsByTagName("TABLE");
for (var i=0;i<tables.length;++i ) {
var el=tables[i];
el.onfocus=new Function("this.className='google selected';window.focusTable=this");
el.onblur=new Function("this.className='google';window.focusTable=null");
};
setHeight=function (nav){
var th=window.focusTable.getElementsByTagName("TH");
var old=parseInt(CSS(th[1]).height);
var New=Math.max(0,Math.min(100,old+10*nav));
th[1].style.height=New+'%';
th[0].style.height=(100-New)+'%';
th[0].style.display=New==100?'none':'';
th[1].style.display=New==0?'none':'';
};
move=function (td,a,b){
var x=td.cellIndex,y=td.parentNode.rowIndex;
var pos=[x+a,y+b];
try{
td2=box.rows[pos[1]].cells[pos[0]].getElementsByTagName("TABLE")[0];
td2.focus();
}catch(e){};
};
document.onkeyup=function (e){
if(window.focusTable==null)return;
var key=(e||event).keyCode;
var nav=false;
var td=focusTable.parentNode;
switch (key){
case 187:return setHeight(1);
case 189:return setHeight(-1);
case 37:return move(td,-1,0);
case 38:return move(td,0,-1);
case 39:return move(td,1,0);
case 40:return move(td,0,1);
}
}
</script>
</html>
代码很简洁
