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>&nbsp;&nbsp;&nbsp;&nbsp;<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作为上面的一个，所以如果用户点击一行，只显示相应的按钮。

有人请告诉我我做错了什么。无论我做什么，我似乎都无法做到这一点。非常感谢！

来源

2011-03-19 johnyboy

'e.stopPropagation（）'试试这个 – Rafay 2011-03-19 05:35:57

感谢马克，这是一个快速解决。 – johnyboy 2011-03-19 05:44:49

改变这一行：

var buttonHandle = $(this).parents("td").find(".userDetails");

要这样：

var buttonHandle = $(this).closest('td').find('.userDetails');

来源

2011-03-19 05:44:15

明白了。通过使用.parents（），我发现我的遍历方式比我需要的要多得多。 – johnyboy 2011-03-19 05:48:41

我很高兴这就是它所需要的！如果你点击我答案旁边的复选标记，它会给你一些观点，并且会增加别人将来回答你的问题的可能性（并且它给了我点数）。 – 2011-03-19 06:22:28

jQuery：从多个单元格中的表格单元格中选择一个输入

回答

相关问题