主页 > jQuery > jQuery单击input框下面弹出表格例子

jQuery单击input框下面弹出表格例子

2010 年 09 月 15 日 没有评论

 <BODY>
 <script src=”jquery.js”></script>
 <script>
$(document).ready(function(){
 $(“#inputname”).focus(function(){
  $(“#getvalue”).css(“display”,’block’)  //显示表格
  .find(‘table tr’).dblclick(function(){  //双击表格tr
   var text=$(this).find(“td:eq(0)”).text();//获取表格td的第一个的文本值
   $(“#getvalue”).css(‘display’,'none’); //隐藏表格
   $(“#inputname”).val(text);    //赋值Input
  });
 });
})
</script>
<div>get value:<input type=”text” name=”inputname” id=”inputname”/>
<div id=”getvalue” style=”display:none;”>
<div id=”tl”></div><div id=”tr”></div>
 <table style=”border:1px solid #ccc ;width:500px;text-align:left;”>
  <thead>
   <tr>
    <th>number</th>
    <th>last name</th>
    <th>first name</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>2</td>
    <td>xing</td>
    <td>ge</td>
   </tr>
   <tr>
    <td>3</td>
    <td>xingad</td>
    <td>gead</td>
   </tr>
   <tr>
    <td>4</td>
    <td>xingxing</td>
    <td>ge</td>
   </tr>
  </tbody>
  <tfoot>
   <tr>
    <td>number</td>
    <td>last name</td>
    <td>first name</td>
   </tr>
  </tfoot>
 </table>
</div>
</div>
</BODY>

Tags: input

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>