2011-03-10 199 views
0

這是用Coldfusion編寫的,所以請忽略CF標記代碼。這是一個jQuery問題。jQuery遍歷DOM並循環遍歷表沒有id的

我有下面的表,根據項目,從1到200倍的任何地方循環。用戶可以在systemname字段中輸入系統名稱,然後單擊「CHECK」按鈕。這會觸發ajax調用來檢查數據庫,以查看輸入的系統名稱是否存在於數據庫中。如果是這樣,那麼它將爲用戶填充其他字段。我可以填充第一個TR上的位置選擇框,但是平臺/模型和預計上線日期未填充,因爲它們位於另一個TR上。我通過刪除標籤證實了這一點,所以我知道我的數據被返回是好的 - 我只需要把它放在正確的地方。

以口頭方式遍歷DOM會像這樣讀取: 一旦CHECK按鈕被單擊並返回數據,jQuery應該繼續到父TABLE,然後向下兩個TR然後進入TD定位平臺,model ,和golive選擇/輸入字段。

我一直在學習遍歷DOM,但是當事情是兄弟姐妹,祖先等。我樣得到這裏作爲部分標記XML所概述的父/子關係船,我不理解(Javascript-Basics-Part-6 ),但我希望有人可以提供更好的教程或遍歷DOM的例子。

下面是表代碼

<cfloop query="rsRequestSystems"> 
<table cellpadding="3" class="tablesorter"> 
    <tr> 
     <th class="form"><label>System Name</label></th> 
     <td><input name="systemname" type="text" class="systemname" value="#rsRequestSystems.systemname#" size="50" maxlength="50"> 
      <div class="SystemNameStatus" style="color:##0000FF"></div></td>    
     <th class="form"><label>Location</label></th> 
     <td><select class="location" name="location"> 
       <option></option> 
       <cfloop query="rsLocations"> 
        <option value="#rsLocations.optionValue#" <cfif rsRequestSystems.location eq rsLocations.optionValue>selected</cfif> >#rsLocations.optionDesc#</option> 
       </cfloop> 
      </select></td> 
     <td rowspan="2" align="center"> 
      <button type="button" class="fg-button ui-state-default ui-corner-all remove_SystemName" style="width:70px;">Remove</button> 
      <button type="button" class="fg-button ui-state-default ui-corner-all check_SystemName" style="width:70px;">Check</button></td> 
    </tr> 
    <tr> 
     <th class="form"><label>Platform/Model</label></th> 
     <td> <select class="platform" name="platform"> 
       <option ></option> 
       <cfloop query="rsPlatform"> 
        <option value="#rsPlatform.optionValue#" <cfif rsRequestSystems.platform eq rsPlatform.optionValue>selected</cfif>>#rsPlatform.optionValue# - #rsPlatform.optionDesc#</option> 
       </cfloop> 
      </select> 
      &nbsp;/&nbsp; 
      <select class="model" name="model"> 
       <option selected></option> 
       <cfloop query="rsModels"> 
        <option value="#rsModels.optionValue#" <cfif rsRequestSystems.model eq rsModels.optionValue>selected</cfif>>#rsModels.optionDesc#</option> 
       </cfloop></select>some text here</td> 
     <th class="form" nowrap><label>Estimated Go Live</label></th> 
     <td><input type="text" name="goLive" class="datepicker goLive" value="#dateformat(rsRequestSystems.golive,'mm/dd/yyyy')#" size="10"></td> 
    </tr>   
</table> 
</cfloop> 

此代碼工作對我的系統名稱字段,但不是爲平臺領域。

thisClicked.closest("tr").find('.systemname').val(data.systemname); //works 
thisClicked.closest("tr:odd").find('.platform').val(data.platform); //does NOT work 

我試過以下,但無論是產生一個錯誤信息或者給我「未定義」

thisClicked.parent().closest("tr:odd").find('.platform').val(data.platform); //does NOT work 
thisClicked.parent().child().("tr:odd").find('.platform').val(data.platform); //does NOT work 

回答

1

試試這個

thisClicked.closest("table").find('.platform').val(data.platform); 

它將工作它的方式了樹,直到它找到一個表格標籤。然後從中找出與平臺類別相關的任何內容,並設置相應的值。

+0

謝謝你的解釋。你不會碰巧知道任何好的「遍歷DOM例子」或教程,你會嗎? – HPWD 2011-03-10 17:49:47

+0

@dlackey不是我的頭頂。我只會通讀http://api.jquery.com/category/traversing/中的所有示例,然後搜索任何有趣/複雜的示例。 – 2011-03-10 20:08:47