使用向上和向下键从表中设置文本框中的值

时间:2016-12-29 15:34:18

标签: jquery html netbeans

我创建了一个表,我正在使用其内容在文本框中设置值。我可以通过鼠标点击进行操作,并且我还可以使用上下键盘键上下移动表行,但我无法在文本框中设置值

这是我的代码

$(window).keyup(function (evt) {
  if (evt.keyCode == 38) { // up
    $('#autotable tr:not(:first).selected')
      .removeClass('selected').prev()
      .addClass('selected');
    $("#textp")
      .val($(this)
      .find('td:first').html()); //this line is not working
  }
  if (evt.keyCode == 40) { // down
    $('#autotable tr:not(:last).selected')
      .removeClass('selected').next()
      .addClass('selected');
    $("#textp").val($(this).find('td:first').html());
  }
});

以下是我使用ajax

动态创建表的代码的重复
   <SCRIPT language="JavaScript" type="text/javascript">
     var xmlHttpRequest=new XMLHttpRequest();
     function edValueKeyPress()
     {
         if(document.getElementById("textp").value!==""){
      xmlHttpRequest.open("get","/WebApplication1/NewServlet?id=" + document.getElementById("textp").value,true);
     xmlHttpRequest.onreadystatechange=process;
     xmlHttpRequest.send();
         }
         else
             {
                 var table=document.getElementById("autotable");
                 table.innerHTML="";
             }
     }

     function process()
     {

                 var JSONtopicobject=eval( "("+xmlHttpRequest.responseText + ")" );
                 console.log(JSONtopicobject);
                 var table=document.getElementById("autotable");
                 table.innerHTML="";

                 var headrow=table.insertRow(0);
                 var headcell=headrow.insertCell(0);
                 headcell.innerHTML=JSONtopicobject.topic.name;
                 var tutorials=JSONtopicobject.topic.tutorial;
                 var i=0;
                 while(i<tutorials.length)
                     {
                         row=table.insertRow(i);
                         row.className=JSONtopicobject.topic.name;
                         cell=row.insertCell(0);
                         var p=tutorials[i];
                         cell.innerHTML=p.name;
                         ++i;
                     }

     }
          </SCRIPT>
                <style type="text/css">
                        td {  cursor: pointer;}

.selected {
background-color: brown;
color: white;
}

  </style>





</head>

<body >
    <h1 style="background-image:url(320px-Draft01_wkp.png);font-size:400%;color: white;">GetaDictionary.com</h1>
    <form action="/WebApplication1/NewServlet" method="post">
        <input type="text" name="textp" id="textp" value=""  onkeypress="edValueKeyPress();" onkeydown="edValueKeyPress();" onkeyup="edValueKeyPress();"  />
        <input type="submit" name="button1" id="button1" value="SEARCH" />

        <br><table id="autotable" style="border: 1px solid grey;font-size:100%;border-top-color: white;" width="173.5" ></table>
    </form>


</body>

0 个答案:

没有答案