jQuery实现鼠标单击网页文字后在文本框显示的方法


Posted in Javascript onMay 06, 2015

本文实例讲述了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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
PHP PDO操作总结
Nov 17 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
Boostrap入门准备之border box
May 09 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
JS根据生日算年龄的方法
May 05 #Javascript
js改变Iframe中Src的方法
May 05 #Javascript
js网页滚动条滚动事件实例分析
May 05 #Javascript
You might like
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python在不同层级目录import模块的方法
2016/01/31 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
python线性插值解析
2020/07/05 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
学习党课思想汇报
2013/12/29 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
整改落实情况汇报材料
2014/10/29 职场文书