Question

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

NoEleLocationDose Rate（mGy / h）氚（DAC）部分（DAC）碘（DAC）表面连续。（贝/ cm 2）的

   <?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>

Answer 1

通过为每个可编辑的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;
}

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

用于创建excel的Javascript，如光标移动

1 个答案: