2014-07-04 17 views
0

我有以下佈局:選擇器選擇多行中的所有單選按鈕。我想在點擊單選按鈕輸入框的名字排

layout diagram

我留意美元符號($)和百分號(%)無線電使用下面的選擇按鈕的變化:

$("#facultyTable input:radio.dollar,#facultyTable input:radio.percent").change(function(){ 
    //What to do here? 
}); 

我試圖用.parent()選擇,不過問題是,因爲我有選擇的所有,我不能簡單地得到父一行<tr>單選按鈕,它是關閉所有的行。我想要的是以下內容:按下單選按鈕後,jquery將文本框的值在同一行中的左側取出。我怎樣才能做到這一點?

這裏是如果需要的表格佈局:

<table id="facultyTable"> 
     <thead> 
      <tr> 
       <th>Username</th> 
       <th>Payment Distribution</th> 
       <th>Account Number (Optional)</th> 
      </tr> 
     </thead> 
     <tbody><tr> 
      <td><input name="username[]" value="klarson" data-cip-id="cIPJQ342845639" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td> 
      <td><input type="radio" name="klarsonOption" value="Even">Even 
       <input type="radio" class="dollar" name="klarsonOption" value="$">$ 
       <input type="radio" class="percent" name="klarsonOption" value="%">% 
       <input type="text" name="klarsonAmount" style="display:none;"> 
        </td> 
      <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845640"></td> 
      </tr><tr> 
      <td><input name="username[]" value="ppoupart" data-cip-id="cIPJQ342845641" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td> 
      <td><input type="radio" name="ppoupartOption" value="Even">Even 
       <input type="radio" class="dollar" name="ppoupartOption" value="$">$ 
       <input type="radio" class="percent" name="ppoupartOption" value="%">% 
       <input type="text" name="ppoupartAmount" style="display:none;"> 
        </td> 
      <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845642"></td> 
      </tr><tr> 
      <td><input name="username[]" value="rcohen" data-cip-id="cIPJQ342845643" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td> 
      <td><input type="radio" name="rcohenOption" value="Even">Even 
       <input type="radio" class="dollar" name="rcohenOption" value="$">$ 
       <input type="radio" class="percent" name="rcohenOption" value="%">% 
       <input type="text" name="rcohenAmount" style="display:none;"> 
        </td> 
      <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845644"></td> 
      </tr><tr> 
      <td><input name="username[]" value="shai" data-cip-id="cIPJQ342845645" style="background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td> 
      <td><input type="radio" name="shaiOption" value="Even">Even 
       <input type="radio" class="dollar" name="shaiOption" value="$">$ 
       <input type="radio" class="percent" name="shaiOption" value="%">% 
       <input type="text" name="shaiAmount" style="display:none;"> 
        </td> 
      <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845646"></td> 
      </tr><tr> 
      <td><input name="username[]" value="vanbeek" data-cip-id="cIPJQ342845647" title="Lazarus is saving this form. 
Click to recover previous versions" style="cursor: auto; background-image: none; background-position: 0% 0%; background-repeat: repeat;"></td> 
      <td><input type="radio" name="vanbeekOption" value="Even">Even 
       <input type="radio" class="dollar" name="vanbeekOption" value="$">$ 
       <input type="radio" class="percent" name="vanbeekOption" value="%">% 
       <input type="text" name="vanbeekAmount" style="display:none;"> 
        </td> 
      <td><input name="accountNum[]" value="604700-23456-2346-246" data-cip-id="cIPJQ342845648"></td> 
      </tr></tbody> 
      </table> 

回答

1

你可以試試這個

$("#facultyTable input:radio.dollar,#facultyTable input:radio.percent").change(function(){ 

    var username = $(this).parent("td").prev("td").find("input:text").val(); 

}); 

DEMO

+0

謝謝,這個工作,你能解釋一下這是如何工作關係嗎? '.prev()'是如何工作的? – ComputerLocus