Heim > Artikel > Web-Frontend > jQuery实现鼠标单击网页文字后在文本框显示的方法
jQuery实现鼠标单击网页文字后在文本框显示的方法
- PHPzOriginal
- 2016-05-16 16:00:471501Durchsuche
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考下
<!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>无标题文档</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>
【相关教程推荐】
1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用JS完美实现仿QQ空间评论回复特效Nächster Artikel：js中日期的加减法_javascript技巧