tableリストでctrl,shiftを組み合わせて複数行の選択を実現
以下にtableラベルの単行、複数行の選択を簡単に実現します.この機能をextで実現することをお勧めします.美観と効果はこれよりいいです.
extを使わなければ、以下の機能はtableマルチライン選択のニーズを完全に満たすことができます.
extを使わなければ、以下の機能はtableマルチライン選択のニーズを完全に満たすことができます.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>table ctrl,shift </title>
<style type="text/css">
TABLE{
FONT-SIZE: 9pt;
background-color: #D9E5A9;
}
TABLE.list{
BORDER-BOTTOM: 1 none;
BORDER-LEFT: 1 none;
BORDER-RIGHT: 1 none;
BORDER-TOP: 1 none;
FONT: messagebox;
overflow: hidden
FONT-SIZE: 9pt;
}
TABLE.list TR.first{
BACKGROUND-COLOR: rgb(255,255,255);
COLOR: black;
FONT: messagebox;
cursor:pointer;
FONT-SIZE: 9pt;
}
TABLE.list TR.second{
BACKGROUND-COLOR: rgb(240,240,240);
COLOR: black;
FONT: messagebox;
cursor:pointer;
}
TABLE.list TR.mouseover{
BACKGROUND-COLOR: #D7DAFF;
cursor:pointer;
}
TABLE.list TR.selected{
BACKGROUND-COLOR: royalblue;
COLOR: white;
FONT: messagebox;
cursor:pointer;
}
</style>
<script>
var ctrl = false;
var shift = false;
var tableStyle;// table
var ifFirst=true;// table
var selectNum=0;// ，
var rowI;//
var selectElement;//
// ctrl shift
document.onkeydown = function () {
if (event.keyCode == 17) {
ctrl = true;
} else {
if (event.keyCode == 16) {
shift = true;
}
}
};
document.onkeyup = function () {
ctrl = false;
shift = false;
};
//
function hilite(theTR){
//
if(ifFirst){
// table ， tableStyle ，
tableStyle=new Array(infoTable.rows.length);
for (var i = 0; i < infoTable.rows.length; i++) {
tableStyle[i]=infoTable.rows(i).className;
}
ifFirst=false;
}
if(theTR.className != "selected"){
theTR.className = "mouseover";
}
}
//
function restore(theTR){
if(theTR.className != "selected")
theTR.className = tableStyle[theTR.rowIndex]
}
//
// selectState
function clickRow(theTR) {
if (ctrl && shift) {// ctrl shift
return;
}
rowI=theTR.rowIndex;
//
if(event.srcElement.tagName=="INPUT" && event.srcElement.type=="checkbox" &&!shift ){
var state = event.srcElement.checked;
if(state){
infoTable.rows(rowI).className = "selected";
infoTable.rows(rowI).selectState = "yes";
selectNum++;
}else{
infoTable.rows(rowI).className = tableStyle[rowI];
infoTable.rows(rowI).selectState = "no";
selectNum--;
}
for (var i = 1; i < infoTable.rows.length; i++) {
if(infoTable.rows(i).selectState == "yes"){
//
selectElement=infoTable.rows(i);
}
}
return;
}
if (!ctrl && !shift) {// ctrl shift
for (var i = 1; i < infoTable.rows.length; i++) {
try {
infoTable.rows(i).cells(0).firstChild.checked = false;
} catch (e) {
//
}
infoTable.rows(i).className = tableStyle[i];
infoTable.rows(i).selectState = "no";
}
try {
infoTable.rows(rowI).cells(0).firstChild.checked = true;
} catch (e) {
//
}
infoTable.rows(rowI).className = "selected";
infoTable.rows(rowI).selectState = "yes";
infoTable.currentRow = rowI;
selectNum=1;
}
if (ctrl) {// ctrl
if(infoTable.rows(rowI).className == "selected"){
try {
infoTable.rows(rowI).cells(0).firstChild.checked = false;
} catch (e) {
//
}
infoTable.rows(rowI).className = tableStyle[rowI];
infoTable.rows(rowI).selectState = "no";
selectNum--;
}else{
try {
infoTable.rows(rowI).cells(0).firstChild.checked = true;
} catch (e) {
//
}
infoTable.rows(rowI).className = "selected";
infoTable.rows(rowI).selectState = "yes";
selectNum++;
}
}
if (shift) {// shift
for (var i = 1; i < infoTable.rows.length; i++) {
try {
infoTable.rows(i).cells(0).firstChild.checked = false;
} catch (e) {
//
}
infoTable.rows(i).className = tableStyle[i];
infoTable.rows(rowI).selectState = "no";
}
if (rowI < infoTable.currentRow) {
for (var i = rowI; i <= infoTable.currentRow; i++) {
try {
infoTable.rows(parseInt(i)).cells(0).firstChild.checked = true;
} catch (e) {
//
}
infoTable.rows(parseInt(i)).className = "selected";
infoTable.rows(parseInt(i)).selectState = "yes";
}
} else {
for (var i = infoTable.currentRow; i <= rowI; i++) {
try {
infoTable.rows(parseInt(i)).cells(0).firstChild.checked = true;
} catch (e) {
//
}
infoTable.rows(parseInt(i)).className = "selected";
infoTable.rows(parseInt(i)).selectState = "yes";
}
}
selectNum=Math.abs(parseInt(infoTable.currentRow)-rowI)+1;
}
for (var i = 1; i < infoTable.rows.length; i++) {
if(infoTable.rows(i).selectState == "yes"){
//
selectElement=infoTable.rows(i);
}
}
}
</script>
</head>
<body>
ctrl shift table ， ，<br/>
， 。
<br/><br/>
<table width="400" border="0" cellspacing="1" cellpadding="3" currentRow="1" id="infoTable" bgcolor="#cccccc" class="list">
<tr>
<th colspan="2" align="center"> </th>
</tr>
<tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox checked>
</td>
<td> </td>
</tr>
<tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
<tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
<tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
<tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
<tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
<tr selectState="no" class="second" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
<tr selectState="no" class="first" onMouseover="hilite(this)" onMouseout="restore(this)" onclick="clickRow(this)">
<td>
<input type=checkbox>
</td>
<td> </td>
</tr>
</table>
</body>
</html>