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：從多個單元格中的表格單元格中選擇一個輸入

回答

相關問題