ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryはWebページ上でマウスをクリックした後にテキストボックスにテキストを表示するメソッドを実装します。

jQueryはWebページ上でマウスをクリックした後にテキストボックスにテキストを表示するメソッドを実装します。

PHPzオリジナル: 2016-05-16 16:00:471589ブラウズ

この記事では、Web ページ上でマウスをクリックした後にテキストボックスにテキストを表示する 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>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS を使用して QQ スペースのコメント返信エフェクトを完全に実装する次の記事：JS を使用して QQ スペースのコメント返信エフェクトを完全に実装する

続きを見る

jQueryはWebページ上でマウスをクリックした後にテキストボックスにテキストを表示するメソッドを実装します。

関連記事