jquery取值修改值

wenbinglove 2012-05-14 02:13:42
<div id="myList">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>

假设我有上面一个div 我需要右击弹出一个菜单 修改 li 便签之间的值 请问我该如何操作

右键 点击弹出一个菜单我已经实现 就不不晓得如何 修改值 请给位指教
...全文
773 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
老王@上新路 2012-05-16
  • 打赏
  • 举报
 回复
楼主真是菜的没法说了，你会不会jquery
AlenCheng 2012-05-14
  • 打赏
  • 举报
 回复
你弹出菜单的demo是怎么实现的呢？
如果是直接一个input那下面代码你可以试下。
$(document).ready(function(){

//给每个li添加单击事件
$("#myList > ul > li").click(function(){
//此处要根据你是如何弹出用户输入框的来定 我这临时建立一个input
$("<input type='text' id='useInput'/>").foucs()
.appendTo($(this));
});

//当input失去焦点时获取输入值
$("#useInput").blur(function(){
var newText = $(this).val();
$(this).parent("li").text(newText);
})
});

//注：以上代码没有经过测试，不过具体思路就是这样
wenbinglove 2012-05-14
  • 打赏
  • 举报
 回复
怎么没人来围观呢
g7887788 2012-05-14
  • 打赏
  • 举报
 回复
感觉挺高深的,,,,
wenbinglove 2012-05-14
  • 打赏
  • 举报
 回复
这是源码


<!DOCTYPE html>
<html lang="zh-CN" >
<head>
<meta charset="UTF-8" />
<title>NewSetting</title>
<meta name="robots" content="ALL" >
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style/admin.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.js"></script>
<script src="js/jquery.dimensions.js"></script>
<script src="js/ui/ui.mouse.js"></script>
<script src="js/ui/ui.draggable.js"></script>
<script src="js/ui/ui.draggable.ext.js"></script>
<script src="js/ui/ui.droppable.js"></script>
<script src="js/ui/ui.droppable.ext.js"></script>
<script src="js/ui/ui.sortable.js"></script>

<script type="text/javascript" src="js/js.js"></script>
</head>
<script type="text/javascript">
var elem = '';
$(document).ready(function(){

$('ul.tagli>li').draggable({
helper: 'clone',
opacity: 0.55,
start:function(e, ui)
{
elem = e.srcElement || e.target;
}
});

$(".box").droppable({
accept: "li a",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
var o = elem.title;
var oid = elem.id;
var sid = "s" + oid;

//有相同的就不插入了。
if ( document.getElementById(sid) == null)
{
$(this).append( "<ul><li title='"+o+"' id='"+sid+"'> "+o+" <a href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></li></ul>" );

}else {

alert ("您已经添加了相同FieidValue,请您删除后再添加，谢谢！");

}

}
});

$('ul.tagli>li').click(function(){
$('#filter').append("<div class='box'><h4>by 频道 <a align='right' href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></h4></div>");


$(".box").droppable({
accept: "li a",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
var o = elem.title;
var oid = elem.id;
var sid = "s" + oid;
//有相同的就不插入了。
if ( document.getElementById(sid) == null)
{
$(this).append( "<ul><li title='"+o+"' id='"+sid+"'> "+o+" <a href='#' onclick='javascript:rem(this);' title='删除此栏'> X</a></li></ul>" );
}else {

alert ("您已经添加了相同FieidValue,请您删除后再添加，谢谢！");

}

}
});

});

});

//移除方法
function rem(a){
$(a.parentNode).remove();
}
</script>
<body>
<div id="header">
<h1>MagicLayer Administration</h1>
<div id="rigbtn"><a href="#">浏览</a><a href="#" class="current">新建</a><a href="#">修改密码</a><a href="#">退出</a></div>
</div>
<div id="content">
<h2 class="pagetitle">NewSetting</h2>
<div class="crumbs"><span >1 基本设置</span><span class="current">2 Filter定制</span><span>3 Output定制</span><span>4 Finish</span></div>

<table width="100%" border="0" cellpadding="0" cellspacing="1" class="tab">
<tr>
<td><h3 class="tit01"><span><select name="">
<option>公有云</option>
</select></span>FieldName</h3>
<ul class="tagli">
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>

<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>
<li title="频道1" id="1">频道1</li>
<li title="频道2" id="2">频道2</li>
<li title="频道3" id="3">频道3</li>
<li title="频道4" id="4">频道4</li>
<li title="频道5" id="5">频道5</li>
<li title="频道6" id="6">频道6</li>
<li title="频道7" id="7">播出时间</li>


</ul> </td>
<td><h3 class="tit01"><span><input name="" type="button" value="增加字段限制"></span>FieidValue</h3>
<ul class="tagli">
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
<li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
</ul>

</td>
</tr>
<tr>
<td colspan="2">
<h3 class="tit01">filter制定</h3>
<div class="scroll">
<div id="filter" class="scrollcont">
<div class="box">

</div>

<div class="box">
<h4>By Date</h4>
<ul>
<li>CCTV2</li>
<li>CCTV2</li>
<li>CCTV2</li>
<li>CCTV2</li>
</ul>
</div>
<div class="box">
<h4>By 频道</h4>
<ul>
<li>CCTV2</li>
<li>CCTV2</li>
<li>CCTV2</li>
<li>CCTV2</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>

<div class="btnli"><input type="button" value="Previous" class="inp1">
<input type="button" value="Next" class="inp2">
</div>

</div>
</body>
</html>
001007009 2012-05-14
  • 打赏
  • 举报
 回复
楼主可以整理下你的demo ，贴出来，大家看看。
wenbinglove 2012-05-14
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]

仅供参考：
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dom-table</title>
<meta http-equiv="……
[/Quote]


谢谢了 你这方法 静态的还可以引用 但动态 貌似不可以 处理起来比较麻烦
wenbinglove 2012-05-14
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 的回复:]

既然要修改值 肯定是可见的input啊，才方便操作。
[/Quote]

谢谢 你是说的这种方式 应该可以做到 但可见的input 会影响页面的效果

隐藏域 可以修改 但没法显示

我现在要做的是 拖拽后产生的 <li></li>标签 然后右键弹出一个菜单栏 然后修改当前点击的<li></li>之间的文本值
001007009 2012-05-14
  • 打赏
  • 举报
 回复
既然要修改值 肯定是可见的input啊，才方便操作。
wenbinglove 2012-05-14
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

点击 时可以动态生成一个input，其value就是li的innerHTML，确定修改时，让li的innerHTML改变成input修改后的value即可
[/Quote]


动态生成一个input 隐藏域吗 ？
༺ཌༀཉི浮华背后༃ༀད༻ 2012-05-14
  • 打赏
  • 举报
 回复
仅供参考：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Dom-table</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<link type="text/css" rel="stylesheet" href="../css/editTable.css" />

<script languag="javascript">

		function changeColorEven(){

			//alert("********");

			var tab = document.getElementsByTagName("tbody")[0];		//先将tbody对象取出

			var tabrow = tab.rows;		//获取当前表格中行的集合

			for (var i=0; i<tabrow.length ; i++ )

			{				

				if (i%2 == 0)

				{

					var tabrows = tabrow[i];

					tabrows.style.cssText = "background:#999999";		//将行数为偶数行的背景色改为灰色

				} //end if

			} //end for

			

			/*

			//获取每行每列的第一个td对象

			for (var a=1; a<tabrow.length ; a++)

			{

				var tabcell = tabrow[a].cells;

				var tabc = tabcell[0];

				//alert(tabc);

				var tabtd = tabc.firstChild;				

			}

			*/



			var tmpArray = new Array();		//定义一个临时数组

			

			for (var i=0; i<tabrow.length ; i++ )

			{

				var tabcel = tabrow[i].all;		//获取列数

				//alert(tabcel.length);

				for (var k=0; k<tabcel.length ; k++ )

				{

					var tabk = tabcel[k];		//	将列数集合给予tabk

					var cellObj = tabk.tagName;		//获取每列的标签名

					//alert(cellObj.length);

					if (cellObj == "TD")		//删选出标签为td的对象

					{

						//alert(cellObj);

						//alert(cellObj.length);

						if (k%2==0)

						{

							//alert(tabcel[k]);

							tmpArray.push(tabcel[k]);		//将取出的每行第一列放入临时数组

						} //end if

					

					} //end if

				} //end for

				

			} //end for

			//alert(tmpArray);



			for (var j=0; j<tmpArray.length ; j++ )

			{

				tmpArray[j].attachEvent("onclick",setInput);		//使单击td产生事件

			} //end for		



		function setInput(eve){

			//alert("****");

			var tdsrc = eve.srcElement;		//将单击的原对象赋予tdsrc

			var tdText = tdsrc.innerText;		//将td内容存于变量tdText中，以便多次使用

			//alert(tdsrc);

			var tdput = document.createElement("input");		//创建input对象

				tdput.type = "text";

				tdput.id = "tdtxt";

				tdput.style.border = 0 ;

				tdput.style.width = "98%";

				tdput.style.fontSize = tdsrc.currentStyle.fontSize;

				tdput.style.backgroundColor = tdsrc.currentStyle.backgroundColor ;		//将原有css样式赋给现有的input对象

				tdput.value = tdsrc.innerText;		//将原对象值赋给新建的input.value中

				tdsrc.innerText = "";



				tdsrc.insertAdjacentElement("afterBegin",tdput);		//将创建的tdput-input对象放入原对象tdsrc中



				tdput.select();		//选取密码域中的文本

				tdput.focus();		//获取输入框的焦点



				tdput.attachEvent("onclick",stopEvent);		//添加阻止事件

				tdput.attachEvent("onkeydown",returnValue);		//添加改变输入值事件



				function returnValue(e){

					var tdput = document.getElementById("tdtxt");

					var retValue = e.keyCode;		//返回键盘值

					//alert(tdput.value);

					//alert(retValue);

					if (retValue == 13)

					{

						tdsrc.innerText = tdput.value;	 //将输入的值赋给td

					}else if (retValue == 27)

					{

						tdput.value = tdText;		//将原有的值赋给input的Value

					} //end if



				} //end fn



		} //end fn



		function stopEvent(e){

				e.cancelBubble = true;		//阻止事件传播

				return false;

		} //end fn		



	} //end fn



	function test(){		

		changeColorEven();

	} //end f



</script>

	</head>

	<body onload="test()">

		<table>

			<thead>

				<th colspan=2>可编辑的表格</th>

			</thead>

			<tbody>

				<tr>

					<th>学号</th>

					<th>姓名</th>

				</tr>

				<tr>

					<td>000001</td>

					<td>张三</td>

				</tr>

				<tr>

					<td>000002</td>

					<td>李四</td>

				</tr>

				<tr>

					<td>000003</td>

					<td>王五</td>

				</tr>

				<tr>

					<td>000004</td>

					<td>赵六</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>
001007009 2012-05-14
  • 打赏
  • 举报
 回复
点击 时可以动态生成一个input，其value就是li的innerHTML，确定修改时，让li的innerHTML改变成input修改后的value即可
jquery 滑动取值
jquery 实现的滑动轴取值，很好，很实用
jquery取值.docx
。
jquery 旋转按钮的取值设值
jquery旋转按钮，利用js对按钮进行取值与设值操作
jQuery区间滑动拖动取值代码.zip
jQuery区间滑动拖动取值代码.zip
jQuery 取值、赋值的基本方法.docx
。
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章