jQuery:从多个单元格中的表格单元格中选择一个输入
我有一个包含多行的表格,每行在标签中都有一个按钮。每个td标签中还有一个链接,当用户点击时,应该显示相应的按钮,但是当我点击链接时,所有按钮都会显示。jQuery:从多个单元格中的表格单元格中选择一个输入
下面是HTML:
<tr>
<td width="10%" align="center"></td>
<td width="80%" align="left"><span style="font-weight:bold;"><a href="javascript:void(0);" class="editText">About Me</a>:</span> <input type="button" class="userDetails" style="display:none;" value="Save"/></td>
<td width="10%" align="center"></td>
</tr>
<tr>
<td width="10%" align="center"></td>
<td width="80%" class="originalText" align="left" valign="top">
'.$aboutMe.'
</td>
<td width="80%" class="aboutMe" align="center" valign="top">
<div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
<textarea class="textBox" cols="20" rows="auto" style="display:none;">
'.$aboutMe.'
</textarea>
</td>
<td width="10%" align="center"></td>
</tr>
,这里是jQuery的:
$(function(){
$(".editText").each(function(e){
$(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
e.preventDefault();
//get handle for textArea //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText");
的按钮使用下面的代码,这是确定所示,它只是把手相应的按钮(代码在上面):
buttonHandle.css({"visibility":"visible"}).show();
有多行,每行都有相同的structur e作为上面的一个,所以如果用户点击一行,只显示相应的按钮。
有人请告诉我我做错了什么。无论我做什么,我似乎都无法做到这一点。 非常感谢!
改变这一行:
var buttonHandle = $(this).parents("td").find(".userDetails");
要这样:
var buttonHandle = $(this).closest('td').find('.userDetails');
明白了。通过使用.parents(),我发现我的遍历方式比我需要的要多得多。 – johnyboy 2011-03-19 05:48:41
我很高兴这就是它所需要的!如果你点击我答案旁边的复选标记,它会给你一些观点,并且会增加别人将来回答你的问题的可能性(并且它给了我点数)。 – 2011-03-19 06:22:28
'e.stopPropagation()'试试这个 – Rafay 2011-03-19 05:35:57
感谢马克,这是一个快速解决。 – johnyboy 2011-03-19 05:44:49