Я тут переписал свой код. Когда курсор на нижней строке и мы нажимаем вниз - добавляется новая строка. Но в опере текст который я туда записываю не отображается в таблице. В IE & FF, работает как надо. Как с этим бороться ?
<html>
<head>
<style>
.SpreadSheet{border-collapse:collapse;}
.SpreadSheet td {border:1px solid #7F9DB9;height:18px;}
.SpreadSheet select{background:#99CCFF;}
.SpreadSheetActivCell{border:3px #000000 solid;}
</style>
</head>
<body>
<table class="SpreadSheet" id="9394688id"><th><select name="street"><option value="Адрес установки">Адрес установки</option><option value="Землянского">Землянского</option><option value="Удмуртская">Удмуртская</option></select></th><th><select name="home"><option value="Дом">Дом</option><option value="9">9</option><option value="29">29</option></select></th><th><select name="porch"><option value="Под">Под</option><option value="2">2</option><option value="1">1</option></select></th><th><select name="dev_desc"><option value="Switch">Switch</option><option value="DES-3526">DES-3526</option></select></th><th><select name="IP"><option value="IP адрес">IP адрес</option><option value="10.102.32.13">10.102.32.13</option><option value="10.108.12.233">10.108.12.233</option></select></th><th><select name="serial_sw"><option value="serial sw">serial sw</option><option value="PL0A175001634">PL0A175001634</option><option value="PL0A175001635">PL0A175001635</option></select></th><th><select name="module0"><option value="модуль">модуль</option><option value="DEM-310GT V.D1">DEM-310GT V.D1</option></select></th><th><select name="module1"><option value="1 модуль">1 модуль</option><option value="E60N164003935">E60N164003935</option><option value="E60N166003929">E60N166003929</option></select></th><th><select name="module2"><option value="2 модуль">2 модуль</option><option value="E60N164004518">E60N164004518</option><option value="E60N164005657">E60N164005657</option></select></th><th><select name="orderDate"><option value="Заказан">Заказан</option><option value="39358">39358</option></select></th><th><select name="readyDate"><option value="Подготовлен">Подготовлен</option><option value="39358">39358</option></select></th><th><select name="givenDate"><option value="Выдан">Выдан</option><option value="39360">39360</option></select></th><th><select name="mountedDate"><option value="Установлен">Установлен</option><option value="39384">39384</option></select></th><tr><td>Землянского</td><td>9</td><td>2</td><td>DES-3526</td><td>10.102.32.13</td><td>PL0A175001634</td><td>DEM-310GT V.D1</td><td>E60N164003935</td><td>E60N164004518</td><td>39358</td><td>39358</td><td>39360</td><td>39384</td></tr><tr><td>Удмуртская</td><td>29</td><td>1</td><td>DES-3526</td><td>10.108.12.233</td><td>PL0A175001635</td><td>DEM-310GT V.D1</td><td>E60N166003929</td><td>E60N164005657</td><td>39358</td><td>39358</td><td>39360</td><td> </td></tr></table> <script>
function sheet(objTable){
var _sheet = {
rowIndex:null,
collIndex:null,
cell:document.createElement('INPUT'),
_objTable:objTable,
moveTo:function(row,coll){
try{
this.save();
var rowMax = this._objTable.rows.length-1; // число рядов
var collMax = this._objTable.rows[1].cells.length; // число колонок
//if(undefined==row || undefined==coll) return false;
if(coll>collMax)coll=collMax; // проверяем чтобы не вылететь за граници таблицы
if(row>rowMax)row=rowMax; // проверяем чтобы не вылететь за граници таблицы
if(row<1)row=1 // проверяем чтобы не вылететь за граници таблицы
if(coll<1)coll=1 // проверяем чтобы не вылететь за граници таблицы
this.rowIndex = row;
this.collIndex = coll;
coll--;
cell = this._objTable.rows[row].cells[coll];
var position = pos(cell);
this.cell.style.top =position[0];
this.cell.style.left =position[1];
this.cell.style.width =cell.clientWidth;
this.cell.style.height =cell.clientHeight;
this.cell.value =cell.firstChild.nodeValue;/**/
}catch(e){
alert(e);
return false;
}
return true;
},
save:function(){
if(null==this.rowIndex || null==this.collIndex ||
undefined==this.rowIndex || undefined==this.collIndex
)
return;
var cell = this._objTable.rows[this.rowIndex].cells[this.collIndex-1];
if(this.cell.value!=cell.firstChild.nodeValue){
cell.firstChild.nodeValue = this.cell.value;
}
},
addRow:function(){
maxColl = this._objTable.rows[1].cells.length+1;
var td,tr = document.createElement('TR');
tbody = this._objTable.rows[1].parentNode;
tbody.appendChild(tr);
for(i=0;i<maxColl;i++){
td = document.createElement('TD');
tr.appendChild(td);
td.appendChild(document.createTextNode(''));
}
//this.moveTo(this.rowIndex+1,this.collIndex);
//this.cell.focus();
tr=td=maxColl=null;
},
init:function(){
// ОБРАБОТЧИКИ СОБЫТИЙ ДЛЯ INPUT
this.cell.style.position='absolute';
document.body.appendChild(this.cell);
this.cell.className='SpreadSheetActivCell';
this.cell.autocompliter='off';
var tt = this;
this.cell.onkeydown = function(e){
lastCellIndex = tt._objTable.rows.length-1;
e=e||event;
switch(e.keyCode||e.charCode){
case 37: tt.moveTo(tt.rowIndex,tt.collIndex-1); break; // move left
case 38: tt.moveTo(tt.rowIndex-1,tt.collIndex); break; // move up
case 39: tt.moveTo(tt.rowIndex,tt.collIndex+1); break; // move right
case 40: if(tt.rowIndex+1>lastCellIndex){tt.addRow();}tt.moveTo(tt.rowIndex+1,tt.collIndex); break; // move down
}
}
objTable.onclick = function(e){
e=e||event;
sorce = e.srcElement || e.target;
var row = sorce.parentNode.rowIndex
var coll= sorce.cellIndex+1;
if(!tt.moveTo(row,coll))return;
tt.cell.focus();
};
this.moveTo(1,1);
this.cell.focus();
}
};
_sheet.init();
return _sheet;
}
s = new sheet(document.getElementById('9394688id'));
function pos(obj){
var x=0,y=0;
do{
x += obj.offsetTop;
y += obj.offsetLeft;
}while(obj=obj.offsetParent)
return [x,y];
}
</script></body>
</html>