开发者

jQuery traversing the DOM and looping over table w/o id's

This is written in Coldfusion so please ignore the CF markup code. This is a jQuery question.

I have the following table that is looped over anywhere from 1 to 200 times depending on the project. The user can enter a system name into the systemname field and click the "CHECK" button. This fires off an ajax call to check the database to see if the system name entered exists in the database. If it does, then it will populate the other fields for the user. I am able to populate the Location select box on the first TR but the Platform/Model and the Estimated Go Live date is not populating because they are on another TR. I confirmed this by removing the tags so I know my data being returned is good - I just need to put it in the right place.

Traversing the DOM verbally would read like this: Once the CHECK button is clicked and the data is returned, jQuery should go up to the parent TABLE, then down two TR and then into the TD to locate the platform, model, and golive select/input fields.

I've been studying traversing the DOM but I'm not understanding when something is a sibling, ancestors, etc. I kind of get the parent/child relation ship as outlined here under a section labeled XML ( Javascript-Basics-Part-6 ) but I'm hoping someone can provide a better tutorial or example of traversing the DOM.

Here is the table code

<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">
          开发者_如何学C      <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>

This code is working for my systemname field but not for the platform field.

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

I've tried the following but either generates an error message or gave me "undefined"

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


Try this

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

It will work it's way up the tree until it finds a table tag. Then work down from that to find anything with the class of platform and set the value on that.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜