TABLE行，根据SHIFT、CTRL连续“涂黑”选中、分别拾取“涂黑”选中

Question

<script>
lastobj=null;
lastrow=null;
lastcol=null;
function setsel()
{
if(!(event.shiftKey)&&!(event.ctrlKey))
{
if(event.srcElement.tagName=="TD")
{
for(i=0;i<document.all.mytable.childNodes(0).childNodes.length;i++)
for(j=0;j<document.all.mytable.childNodes(0).childNodes(i).childNodes.length;j++)
{
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.background="";
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.color="";
}
event.srcElement.style.background="black";
event.srcElement.style.color="white";
if(lastobj!=null)
{
lastobj.style.background="";
lastobj.style.color="";
}
lastobj=event.srcElement;
lastrow=event.srcElement.parentElement.rowIndex+1;
lastcol=event.srcElement.cellIndex+1;
}
}
else if(event.shiftKey)
{
for(i=0;i<document.all.mytable.childNodes(0).childNodes.length;i++)
for(j=0;j<document.all.mytable.childNodes(0).childNodes(i).childNodes.length;j++)
{
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.background="";
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.color="";
}if(lastrow<event.srcElement.parentElement.rowIndex+1)
{
rowmin=lastrow;
rowmax=event.srcElement.parentElement.rowIndex+1;
}
else
{
rowmax=lastrow;
rowmin=event.srcElement.parentElement.rowIndex+1;
}
if(lastcol<event.srcElement.cellIndex+1)
{
colmin=lastcol;
colmax=event.srcElement.cellIndex+1;
}
else
{
colmax=lastcol;
colmin=event.srcElement.cellIndex+1;
}
for(i=rowmin;i<=rowmax;i++)
for(j=colmin;j<=colmax;j++)
{
document.all(i+""+j).style.background="black";
document.all(i+""+j).style.color="white";
}
}
else if(event.ctrlKey)
{
if(event.srcElement.tagName=="TD")
{
event.srcElement.style.background="black";
event.srcElement.style.color="white";
lastobj=event.srcElement;
lastrow=event.srcElement.parentElement.rowIndex+1;
lastcol=event.srcElement.cellIndex+1;
}
}
}
</script>
<table id=mytable onclick=setsel()>
<tr><td id=11>11</td><td id=12>12</td><td id=13>13</td></tr>
<tr><td id=21>21</td><td id=22>22</td><td id=23>23</td></tr>
<tr><td id=31>31</td><td id=32>32</td><td id=33>33</td></tr>
<tr><td id=41>41</td><td id=42>42</td><td id=43>43</td></tr>
</table>

Answer 1

<script>
lastobj=null;
lastrow=null;
lastcol=null;
function setsel()
{
if(!(event.shiftKey)&&!(event.ctrlKey))
{
if(event.srcElement.tagName=="TD")
{
for(i=0;i<document.all.mytable.childNodes(0).childNodes.length;i++)
for(j=0;j<document.all.mytable.childNodes(0).childNodes(i).childNodes.length;j++)
{
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.background="";
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.color="";
}
event.srcElement.style.background="black";
event.srcElement.style.color="white";
if(lastobj!=null)
{
lastobj.style.background="";
lastobj.style.color="";
}
lastobj=event.srcElement;
lastrow=event.srcElement.parentElement.rowIndex+1;
lastcol=event.srcElement.cellIndex+1;
}
}
else if(event.shiftKey)
{
for(i=0;i<document.all.mytable.childNodes(0).childNodes.length;i++)
for(j=0;j<document.all.mytable.childNodes(0).childNodes(i).childNodes.length;j++)
{
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.background="";
document.all.mytable.childNodes(0).childNodes(i).childNodes(j).style.color="";
}if(lastrow<event.srcElement.parentElement.rowIndex+1)
{
rowmin=lastrow;
rowmax=event.srcElement.parentElement.rowIndex+1;
}
else
{
rowmax=lastrow;
rowmin=event.srcElement.parentElement.rowIndex+1;
}
if(lastcol<event.srcElement.cellIndex+1)
{
colmin=lastcol;
colmax=event.srcElement.cellIndex+1;
}
else
{
colmax=lastcol;
colmin=event.srcElement.cellIndex+1;
}
for(i=rowmin;i<=rowmax;i++)
for(j=colmin;j<=colmax;j++)
{
document.all(i+""+j).style.background="black";
document.all(i+""+j).style.color="white";
}
}
else if(event.ctrlKey)
{
if(event.srcElement.tagName=="TD")
{
event.srcElement.style.background="black";
event.srcElement.style.color="white";
lastobj=event.srcElement;
lastrow=event.srcElement.parentElement.rowIndex+1;
lastcol=event.srcElement.cellIndex+1;
}
}
}
</script>
<table id=mytable onclick=setsel()>
<tr><td id=11>11</td><td id=12>12</td><td id=13>13</td></tr>
<tr><td id=21>21</td><td id=22>22</td><td id=23>23</td></tr>
<tr><td id=31>31</td><td id=32>32</td><td id=33>33</td></tr>
<tr><td id=41>41</td><td id=42>42</td><td id=43>43</td></tr>
</table>