выделение прямоугольной области
подскажите наиболее эффективное решение для реализации выделения прямоугольной области в веб-варианте excel(где ячейки spreadsheet - это ячейки таблицы), с возможностью последующего объединения ячеек(rowspan, colspan). Пробовал, с помощью 2 вложенных циклов, вроде выделяет, но как-то по разному всякий раз, тяну на весь лист а выделяется область 6 на 10 ячеек скажем, хотя mouseup не происходит, ресурсов процессора вроде хватает.
|
посмотри Google Docs у них там Excel реализован
|
belbek, а ты уверен, что потянешь такой проектище?
Мой вариантик (сделал just for fun, так что объединяет один раз из-за id-шников): <table border="1" height="30" width="270"> <tr> <td id="c1">abc</td><td id="c2">def</td><td id="c3">ghi</td> <td id="c4">jkl</td><td id="c5">mno</td><td id="c6">pqr</td> <td id="c7">stu</td><td id="c8">vwx</td><td id="c9">yz!</td> </tr> </table> <input type="button" onclick="unite()" value="Объединять" /> <script> var table = document.getElementsByTagName('table')[0], allCells = document.getElementsByTagName('td'), start, finish, clicked=false table.onmousedown = function(){ clicked=true for(var i=0,j=allCells.length;i<j;i++) allCells[i].style.background = 'white' var event = arguments[0] || window.event, cell = event.target||event.srcElement cell.style.background = 'blue' start = cell.id.match(/\d+/g) return false } table.onmouseout = function(event){ if(!clicked) return var event = event || window.event, cell = event.relatedTarget || event.toElement if(cell.tagName != 'TD') return finish = cell.id.match(/\d+/g) for(var i=0,j=allCells.length;i<j;i++) allCells[i].style.background = 'white' var i,j if(start[0]<=finish[0]){ i=start[0]; j=finish[0] } else{ j=start[0]; i=finish[0] } for(;i<=j;i++) document.getElementById('c'+i).style.background = 'blue' return false } table.onmouseup = function(){ clicked = false } function unite(){ var i,j,inner='',cellsToDel=[] if(start[0]<=finish[0]){ i=start[0]; j=finish[0] } else{ j=start[0]; i=finish[0] } for(;i<=j;i++){ var c = document.getElementById('c'+i) inner += c.innerHTML cellsToDel.push(c) } for(var a=1, b=cellsToDel.length;a<b;a++) cellsToDel[a].parentNode.removeChild(cellsToDel[a]) cellsToDel[0].innerHTML = inner } </script>Но это упрощенный пример. Если его расширять, то количество проблем будет множиться в геометрической прогрессии:) |
Часовой пояс GMT +3, время: 03:33. |