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

Javascript for creating excel like cursor movement

本文关键字：光标 Javascript 移动 excel 创建 用于      更新时间：2023-09-26

我有下面的表单来获取用户输入并更新到mysql表。因为在下面给出的表中将有大约25行，并且每行具有大约7个输入框。我需要一个简单的javascript函数来使用水平和垂直箭头键在输入框中移动。目前只能使用制表符，制表符从左到右连续移动，非常麻烦。我发现了一些可编辑的网格，但它们很复杂，我知道如何处理数据，只需要四处移动。提前感谢

NoEleLocation剂量率（mGy/h）氚（DAC）部件（DAC）碘（DAC）表面接触（Bq/cm2）

   <?php 
        $db=mysql_select_db($database,$con) or die("could not connect");
        $secsql= "SELECT * FROM location ORDER BY loc_id";
        $result_sec=@mysql_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>

通过给每个可编辑的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服务器加载页面时，需要执行该代码，以及您已经完成的任何其他页面初始化工作。回到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;
}

请注意，使用此代码，您需要一个"提交"按钮才能将数据发送到Web服务器。此外，由于这更多的是一个建议，而不是一个完整详细的答案，我还没有测试代码的拼写错误等。浏览器内置javascript调试器的一些实验将揭示向上箭头、向下箭头等的键代码。

相关文章：