javascript 关于表格着色

Question

本帖最后由 kevo333 于 2011-08-27 16:11:00 编辑

Answer 1

懒的找外链图片了，这是表格代码
<table width="196" border="0" cellspacing="5">
  <tr>
    <td width="89"><table width="102" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td width="91"><table width="102" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="102" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td><table width="102" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

Answer 2

<script>
  var tds=document.getElementsByTagName("td");
  for(var i=1;i<tds.length;i++){
  if(i%8){//剔除另外一种td标签
       tds[i].onclick=function(){
       this.style.backgroundColor="red";
   }
 }
  }
</script>

Answer 3

onclick就能满足要求了吧？楼主

Answer 4

<script language="JavaScript">
var ECGridSelector=function()
{
var A=this;
A.selectTable=null;
A.selectRows=null;
var H=false,G=false,K=null,C={x:-1,y:-1},E={x:-1,y:-1},I={x:-1,y:-1},
D=function(B,A){return B<A?B:A},F=function(B,A){return B>A?B:A},
B=function(J)
{
    var I=J==""?"off":"on",
L=D(C.x,E.x),
B=F(C.x,E.x),
M=D(C.y,E.y),
G=F(C.y,E.y),
H=null;
for(var N=M;N<=G;N++)
for(var K=L;K<=B;K++)
{
H=A.selectRows[N].cells[K];
H.className=J;
H.setAttribute("unselectable",I)
}
},
J=false;
A.doSelect=function(A)
{
if(!G||J)return;
J=true;
A=A||window.event;
var C=A.target||A.srcElement,D=E.x,F=E.y;
I.x=C.cellIndex;
I.y=C.parentNode.rowIndex;
B("");
E.x=I.x;
E.y=I.y;
B("selected");
J=false
};
A.startSelect=function(A)
{
A=A||window.event;
if(!H||J||!(A.which==1||A.button==1))
return;
G=true;
var D=A.target||A.srcElement;if(C.x>=0)B("");
C.x=D.cellIndex;
C.y=D.parentNode.rowIndex;
E.x=D.cellIndex;
E.y=D.parentNode.rowIndex;
B("selected")};
A.endSelect=function(A){G=false};
A.toggleSelectable=function()
{
if(H)
{
H=false;
A.selectTable.className="";
if(C.x>=0)B("")
}
else
{
H=true;
A.selectTable.className="selectTable"
}
C.x=-1;
C.y=-1;
E.x=-1;
E.y=-1
};
A.getJSONData=function()
{
var J=[];
if(C.x<0)return J;
var B=null,L=D(C.x,E.x),G=F(C.x,E.x),M=D(C.y,E.y),H=F(C.y,E.y),I=null;
for(var N=M;N<=H;N++)
{
B=[];
for(var K=L;K<=G;K++)
{
I=A.selectRows[N].cells[K];
B.push(I.textContent||I.innerText)
}
J.push(B)
}
return J
} }
var mySelector=new ECGridSelector();function showData(){
var recordList=mySelector.getJSONData();
alert(recordList.join("\n") );
for (var i=0;i<recordList.length;i++){

}}
function init(){
mySelector.selectTable=document.getElementById("testTable");
mySelector.selectRows=mySelector.selectTable.rows;
mySelector.toggleSelectable();}
</script>
这是原函数，在同个表格内能通过鼠标的点击拖动选取实现N*M表格的选择，在要实现这个功能的表格table假如下面这行代码：
<table width="568" height="172" border="1" cellspacing="0" id="testTable"onmousemove="mySelector.doSelect(event)" 
  onmousedown="mySelector.startSelect(event)" 
  onmouseup="mySelector.endSelect(event)">
      <tr class="header">
但是无法实现同一嵌套表格内不同表格之间鼠标的选取

Answer 5

目标：在同一嵌套表格不同表格之中能实现像在同一表格的功能
用onclick只能一个一个单元格着色，而不能通过鼠标拖拽选取嵌套表格内多个不同表格内多单元格着色