快捷導(dǎo)航

jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法

更新時(shí)間：2015年05月06日 09:21:51 投稿：shichen2014

這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊上方文字即可在下方勾選處文本框顯示對(duì)應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>張三</li>
<li>李四</li>
<li>王五</li>
<li>趙六</li>
</ul>
<table width="200" border="1" cellspacing="0" cellpadding="0">
 <tr>
  <td>選擇</td>
  <td>姓名</td>
 </tr>
 <tr>
  <td><input type="checkbox" name="checkbox" value="1" /></td>
  <td><input type="text" name="username" value="" /></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="checkbox" value="1" /></td>
  <td><input type="text" name="username" value="" /></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="checkbox" value="1" /></td>
  <td><input type="text" name="username" value="" /></td>
 </tr>
</table>
<script>
$("ul li").click(function(){
var text = $(this).text();
$("input").val("");
$("input:checked").parents("td").siblings("td").children("input").val(text);
})
</script>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JQuery validate插件Remote用法大全
validate是一個(gè)基于Jquery的表單驗(yàn)證插件，利用他的remote可以用來(lái)自定義遠(yuǎn)程驗(yàn)證，這篇文章主要介紹了JQuery validate插件Remote用法大全的相關(guān)資料,需要的朋友可以參考下
2016-05-05
jQuery實(shí)現(xiàn)在列表的首行添加數(shù)據(jù)
這篇文章主要介紹了jQuery實(shí)現(xiàn)在列表的首行添加數(shù)據(jù)的方法，十分的簡(jiǎn)單，有需要的小伙伴可以參考下。
2015-05-05
form表單只提交數(shù)據(jù)而不進(jìn)行頁(yè)面跳轉(zhuǎn)的解決方案
將數(shù)據(jù)提交到saveReport（form的action指向）頁(yè)面，但是頁(yè)面又不進(jìn)行跳轉(zhuǎn)，即保持當(dāng)前頁(yè)面不變呢？利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成
2013-09-09
jquery $.ajax各個(gè)事件執(zhí)行順序
jquery中各個(gè)事件執(zhí)行順序如下,使用jquery $.ajax的朋友可以參考下。
2010-10-10
Jquery+Ajax+xml實(shí)現(xiàn)中國(guó)地區(qū)選擇三級(jí)聯(lián)動(dòng)菜單效果(推薦)
下面小編就為大家?guī)?lái)一篇Jquery+Ajax+xml實(shí)現(xiàn)中國(guó)地區(qū)選擇三級(jí)聯(lián)動(dòng)菜單效果(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
jQuery實(shí)現(xiàn)通過(guò)方向鍵控制div塊上下左右移動(dòng)的方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)通過(guò)方向鍵控制div塊上下左右移動(dòng)的方法,涉及jQuery結(jié)合鍵盤事件響應(yīng)動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
這篇文章主要介紹了jQuery常用樣式操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素樣式的獲取、設(shè)置、追加、刪除、判斷等操作方法,需要的朋友可以參考下
2016-09-09
jQuery源碼分析-02正則表達(dá)式 RegExp 常用正則表達(dá)式
在網(wǎng)上找到一篇廣為流傳的文章《常用正則表達(dá)式》，逐一分析，不足地方進(jìn)行補(bǔ)充和糾正
2011-11-11
jquery判斷iPhone、Android設(shè)備類型
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)iPhone、Android設(shè)備判斷方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table,需要的朋友可以參考下
2014-05-05