<style type="text/css">
html, body{
margin: 0px;
}
table{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
width: 500px;
height: 500px;
}
table, td, th{
margin: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
}
</style>
<script type="text/javascript">
var startCell = null;
function mouseDown(table, e) {
if (!e) var e = window.event;
startCell = e.srcElement ? e.srcElement : e.target;
if (startCell.tagName != "TD") {
startCell = null;
return;
}
mouseMove(table, e);
}
function mouseUp(table, e) {
if (!e) var e = window.event;
var endCell = e.srcElement ? e.srcElement : e.target;
if (!(endCell.tagName == "TD" && startCell))
return false;
var from = getCellPos(table, startCell);
var to = getCellPos(table, endCell);
if (!from || !to)
return false;
startCell = null;
// вот здесь я извлекаю выделенные элементы
var table2 = document.getElementById('idWalkTable');
var trList = table2.getElementsByTagName('tr');
var result = "";
for (var i = from.row; i <= to.row; i++) {
var tdList = trList[i].getElementsByTagName('td');
for (j = from.col; j <= to.col; j++) {
result += tdList[j].innerHTML;
}
result += '\n';
}
alert(result);
}
function mouseMove(table, e) {
if (!e) var e = window.event;
var endCell = e.srcElement ? e.srcElement : e.target;
if (!(endCell.tagName == "TD" && startCell))
return false;
var from = getCellPos(table, startCell);
var to = getCellPos(table, endCell);
if (!from || !to)
return false;
var x, y, cells;
for (y = 0; y < table.rows.length; y++) {
row = table.rows.item(y);
for (x = 0; x < row.cells.length; x++) {
if ((from.row - y) * (y - to.row) >= 0 && (from.col - x) * (x - to.col) >= 0)
row.cells.item(x).style.backgroundColor = "#ffdddd";
else
row.cells.item(x).style.backgroundColor = "transparent";
}
}
}
function getCellPos(table, cell) {
var pos = new Object();
if (cell.nodeName == "TD") {
var x, y, cells;
for (y = 0; y < table.rows.length; y++) {
row = table.rows.item(y);
for (x = 0; x < row.cells.length; x++) {
if (row.cells.item(x) == cell) {
pos.row = y;
pos.col = x;
return pos;
}
}
}
}
return null;
}
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9296140-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
<body>
<table id="idWalkTable" onmousedown="mouseDown(this, event); return false;" onmouseup="mouseUp(this, event);" onmousemove="mouseMove(this, event); return false;">
<tr>
<td>(0,0)</td><td>(1,0)</td><td>(2,0)</td><td>(3,0)</td><td>(4,0)</td><td>(5,0)</td><td>(6,0)</td>
</tr>
<tr>
<td>(0,1)</td><td>(1,1)</td><td>(2,1)</td><td>(3,1)</td><td>(4,1)</td><td>(5,1)</td><td>(6,1)</td>
</tr>
<tr>
<td>(0,2)</td><td>(1,2)</td><td>(2,2)</td><td>(3,2)</td><td>(4,2)</td><td>(5,2)</td><td>(6,2)</td>
</tr>
<tr>
<td>(0,3)</td><td>(1,3)</td><td>(2,3)</td><td>(3,3)</td><td>(4,3)</td><td>(5,3)</td><td>(6,3)</td>
</tr>
<tr>
<td>(0,4)</td><td>(1,4)</td><td>(2,4)</td><td>(3,4)</td><td>(4,4)</td><td>(5,4)</td><td>(6,4)</td>
</tr>
<tr>
<td>(0,5)</td><td>(1,5)</td><td>(2,5)</td><td>(3,5)</td><td>(4,5)</td><td>(5,5)</td><td>(6,5)</td>
</tr>
<tr>
<td>(0,6)</td><td>(1,6)</td><td>(2,6)</td><td>(3,6)</td><td>(4,6)</td><td>(5,6)</td><td>(6,6)</td>
</tr>
</table>
<textarea id="forе" name="fore" onfocus="this.select()"> 1234567890</textarea>
</body> |
