用于创建类似光标移动的excel的Javascript

我有下面的表单来获取用户输入并更新到mysql表。由于下表中将有大约25行，每行有大约7个输入框。我需要一个简单的javascript函数来使用箭头键在垂直和水平方向上移动输入框。目前只有标签可以使用，并且标签从左至右连续移动并且很麻烦。我发现了一些可编辑的网格，但这些网格很复杂，我知道如何处理数据，只需要移动即可。在此先感谢用于创建类似光标移动的excel的Javascript

否ELELocationDose Rate（mGy/h）Tritium （DAC）部分（DAC）碘（DAC）表面Cont。（贝可/平方厘米）

<?php 
     $db=mysql_select_db($database,$con) or die("could not connect"); 
     $secsql= "SELECT * FROM location ORDER BY loc_id"; 
     [email protected]_query($secsql) or die(mysql_error()); 
    $rc=0; 
      while($row2=mysql_fetch_array($result_sec)) 
       { 
       echo "<tr>"; 
       echo "<td>".++$rc."</td>"; 
       echo "<td><input size='5' id='".$row2['elevation']."' value='".$row2['elevation']."' /></td>"; 
       echo "<td><input id='".$row2['loc_id']."' value='".$row2['location']."' /></td>"; 
       echo "<td><input size='5' id='dose' /></td>"; 
       echo "<td><input size='5' id='h3' /></td>"; 
       echo "<td><input size='5' id='part' /></td>"; 
       echo "<td><input size='5'id='iod' /></td>"; 
       echo "<td><input size='5'id='cont' /></td>"; 

       echo "</tr>"; 
      } 



?> 

    </table> 



    <div align="center"> 
    <input type="submit" id="submit" name="submit" value="Submit" width="30" /> 
    </div> 

    </form>

来源

2014-10-04 mansoondreamz

你有正确的开始，通过给每个编辑input领域唯一的ID。但是，您也有错误，因为while循环会处理多行，所以最后的5个ID（例如，id='dose'）将被复制，并且它们需要不同。我建议你将所有id=更改为name=，并给它们提供类似但仍然唯一的ID，如id='AA'和id='AB'和id='BA'等等。然后，在你的JavaScript，你可以使用像这样取输入对象的整个二维数组：

var cels, x, y; //globals 
cels=[]; 
for(x=0; x<7; x++) 
{ tmp="ABCEDFG".substr(x,1); 
    cels[x]=[]; 
    for(y=0; y<25; y++) 
    cels[x][y]=document.getElementById(tmp+"ABCDEFGHIJKLMNOPQRSTUVWXY".substr(y,1)); 
}

代码需要时页面从Web服务器加载，与whatever-一起被执行其他页面初始化的东西，你已经做了。让我们回到你的PHP，你还需要给每个那些input领域的onkeydown函数调用，也就是说，

echo "<td><input size='5' name='dose' id='AC' onkeydown='tstkey(event, id);' /></td>";

这个函数会是这个样子（相同的呼叫！）：

function tstkey(e, i) 
{ x="ABCDEFG".indexOf(i.substr(0,1)); 
    y="ABCDEFGHIJKLMNOPQRSTVWXY".indexOf(i.substr(1,1)); 
    if(e.keyCode == 13)  //Enter key pressed? 
    { x++;  //index of next cell in current row 
    if(x>6)  //off the end? 
    { x=0;  //first cell 
     y++;  //next row 
     if(y>24) //off the end? 
     y=0; //first row 
    } } 
// if(e.keyCode == down-arrow, up-arrow, etc) 
//  do appropriate manipulation of x and y coordinates 

    cels[x][y].focus(); //move cursor to other cell in 2D array of input fields 
    return; 
}

请注意，使用此代码，您需要一个SUBMIT按钮将数据发送到Web服务器。此外，由于这更多的建议比完整的详细的答案，我还没有测试错别字等代码。使用浏览器的内置javascript调试器进行的一些实验将会揭示用于uparrow，downarrow等的键盘代码。

来源

2014-10-04 17:13:12 vernonner3voltazim

用于创建类似光标移动的excel的Javascript

回答

相关问题