复制代码 代码如下:

<div>get value:<input type="text" name="inputname" id="inputname"/>

<div id="getvalue">

<div id="tl"></div><div id="tr"></div>

<table>

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

接下来我们写点JS代码实现这个功能：

复制代码 代码如下:

$(document).ready(function(){

$("#inputname").focus(function(){

//alert('focus');

$("#getvalue").css("display",'block')//显示表格

.addClass('hover')

.find('table tr').dblclick(function(){//双击表格tr

var text=$(this).find("td:eq(0)").text();//获取表格td的第一个的文本值

//alert($text);

$("#getvalue").css('display','none');//隐藏表格

$("#inputname").val(text);//赋值Input

});

});

})