jQuery遍历DOM并循环遍历表w / o id

时间:2011-03-10 17:33:21

标签: jquery ajax

这是用Coldfusion编写的,所以请忽略CF标记代码。这是一个jQuery问题。

我有下表,根据项目的不同,在1到200次循环。用户可以在systemname字段中输入系统名称,然后单击“CHECK”按钮。这将触发ajax调用以检查数据库以查看输入的系统名称是否存在于数据库中。如果是,则它将填充用户的其他字段。我能够填充第一个TR上的位置选择框,但平台/模型和估计的直播日期没​​有填充,因为它们在另一个TR上。我通过删除标签证实了这一点,所以我知道我的数据返回是好的 - 我只需要将它放在正确的位置。

口头遍历DOM将如下所示: 单击CHECK按钮并返回数据后,jQuery应该转到父TABLE,然后按下两个TR,然后转到TD,找到平台,模型和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>

此代码适用于我的systemname字段,但不适用于平台字段。

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 个答案:

答案 0 :(得分:1)

试试这个

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

它将在树上运行,直到找到表标记。然后从那里开始,找到平台类的任何东西,然后设置值。