jquery 打開窗口返回值實現(xiàn)代碼
更新時間:2010年03月04日 18:35:14 作者:
網(wǎng)頁上常常有這種效果,當(dāng)你的鼠標移入一個輸入框時會彈出一個對話框讓你選擇填入該對話框的值,現(xiàn)在我們用Jquery簡單的實現(xiàn)這種效果。
復(fù)制代碼 代碼如下:
<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>
接下來我們寫點JS代碼實現(xiàn)這個功能:
復(fù)制代碼 代碼如下:
$(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
});
});
})
相關(guān)文章
使用JQUERY進行后臺頁面布局控制DIV實現(xiàn)左右式
一個網(wǎng)站的后臺使用frame框架來實現(xiàn)這種形式,這邊作者不是使用的frame而是純div進行布局,下面看下具體的實現(xiàn)代碼2014-01-01
jquery+h5實現(xiàn)九宮格抽獎特效(前后端代碼)
這篇文章主要為大家詳細介紹了jquery+h5實現(xiàn)九宮格抽獎特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08
有關(guān)jQuery中parent()和siblings()的小問題
本文通過一個實例給大家介紹有關(guān)parent()和siblings()問題原因及解決方案,非常不錯具有參考借鑒價值,感興趣的朋友一起看看吧2016-06-06
jQuery實現(xiàn)為table表格動態(tài)添加或刪除tr功能示例
這篇文章主要介紹了jQuery實現(xiàn)為table表格動態(tài)添加或刪除tr功能,結(jié)合實例形式分析了jQuery針對table表格行動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
jquery實現(xiàn)不包含當(dāng)前項的選擇器實例
這篇文章主要介紹了jquery實現(xiàn)不包含當(dāng)前項的選擇器,實例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06

