如何使用 jQuery 将特定单元格附加到外部表中的特定行答案

【问题标题】：How do I append a specific cell to a specific row in the outer table with jQuery如何使用 jQuery 将特定单元格附加到外部表中的特定行
【发布时间】：2012-12-16 16:48:21
【问题描述】：

我正在尝试构建一个动态表。

前 2 列是硬编码的（想想标题），我需要根据循环遍历 XML 文件的内容来动态添加列。

第二行的每个单元格都包含一个子表。

循环通过XML文件，我如何将“XXX”动态添加到第3行的outer表，“YYY”到第4行，等等？

--我已经重新发布了更多的表格。请注意，每行的第 3 和第 4 个单元格的内容是从 XML 动态生成的（可能更多基于 XML）。为了获得帮助，我对内容进行了硬编码。还有更多的行，但如果我能通过这一点，我应该很好。--

<table class="someclass" border="1" id="myTable">
    <tr>
        <th>Criteria</th>
        <th>Page</th>
            <th width="190px">
                Person 1 - <span id="name1" name="name1">Joe</span>
            </th>
            <th width="190px">
                Person 2 - <span id="name1" name="name1">Bob</span>
            </th>
    </tr>
    <tr>
        <td>
            Stats
        </td>
        <td class="page">
        </td>
        <td>
            <table id="stats1">
                <tr>
                    <td class="StatTitle">ST:</td>
                    <td class="StatValue"><input id="baseST1" name="baseST1" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">HP:</td>
                    <td class="StatValue"><input id="baseHPs1" name="baseHPs1" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">DX:</td>
                    <td class="StatValue"><input id="baseDX1" name="baseDX1" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">Will:</td>
                    <td class="StatValue"><input id="baseWill1" name="baseWill1" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">IQ:</td>
                    <td class="StatValue"><input id="baseIQ1" name="baseIQ1" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">Per:</td>
                    <td class="StatValue"><input id="basePer1" name="basePer1" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">HT:</td>
                    <td class="StatValue"><input id="baseHT1" name="baseHT1" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">FP:</td>
                    <td class="StatValue"><input id="baseFP1" name="baseFP1" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">Speed:</td>
                    <td class="StatValue"><input id="BS1" name="BS1" type="text" class="statsCalc" disabled="disabled"></span></td>
                    <td class="StatTitle">Move:</td>
                    <td class="StatValue"><input id="BM1" name="BM1" type="text" class="statsCalc" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">B Lift:</td>
                    <td class="StatValue"><input id="BL1" name="BL1" type="text" class="statsCalc" disabled="disabled"></span></td>
                    <td class="StatTitle">Dodge:</td>
                    <td class="StatValue"><input id="Dodge1" name="Dodge1" type="text" class="statsCalc" disabled="disabled"></span></td>
                </tr>
            </table>
        </td>
        <td>
            <table id="stats2">
                <tr>
                    <td class="StatTitle">ST:</td>
                    <td class="StatValue"><input id="baseST2" name="baseST2" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">HP:</td>
                    <td class="StatValue"><input id="baseHPs2" name="baseHPs2" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">DX:</td>
                    <td class="StatValue"><input id="baseDX2" name="baseDX2" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">Will:</td>
                    <td class="StatValue"><input id="baseWill2" name="baseWill2" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">IQ:</td>
                    <td class="StatValue"><input id="baseIQ2" name="baseIQ2" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">Per:</td>
                    <td class="StatValue"><input id="basePer2" name="basePer2" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">HT:</td>
                    <td class="StatValue"><input id="baseHT2" name="baseHT2" type="text" class="stats" disabled="disabled"></span></td>
                    <td class="StatTitle">FP:</td>
                    <td class="StatValue"><input id="baseFP2" name="baseFP2" type="text" class="stats" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">Speed:</td>
                    <td class="StatValue"><input id="BS2" name="BS2" type="text" class="statsCalc" disabled="disabled"></span></td>
                    <td class="StatTitle">Move:</td>
                    <td class="StatValue"><input id="BM2" name="BM2" type="text" class="statsCalc" disabled="disabled"></span></td>
                </tr>
                <tr>
                    <td class="StatTitle">B Lift:</td>
                    <td class="StatValue"><input id="BL2" name="BL2" type="text" class="statsCalc" disabled="disabled"></span></td>
                    <td class="StatTitle">Dodge:</td>
                    <td class="StatValue"><input id="Dodge2" name="Dodge2" type="text" class="statsCalc" disabled="disabled"></span></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            Maneuver
        </td>
        <td class="page">
            363
        </td>
        <td>
            <div id="maneuver1">
                <input type="hidden" name="person1" />
            </div>
            <div id="throwDiv1" name="throwDiv1" class="throw">
                <label class="throw">Lbs</label>
                <input type="text" id="throwInput1" name="throwInput1" class="throw" />
            </div>
        </td>
        <td>
            <div id="maneuver2">
                <input type="hidden" name="person2" />
            </div>
            <div id="throwDiv2" name="throwDiv2" class="throw">
                <label class="throw">Lbs</label>
                <input type="text" id="throwInput2" name="throwInput2" class="throw" />
            </div>
        </td>
    </tr>

    <tr>
        <td>
            Weapon
        </td>
        <td class="page">
            99
        </td>
        <td>
            <select name="weapon1" id="weapon1">
            </select>
            <a href="#" class="weaponFlyouts">
                Details
                <span class="weaponMaster">
                    <img class="callout" src="images/callout.gif" />
                    <span id="weaponName1" name="weaponName1" class="weaponName"></span><img id="weaponImage1" src="">
                    <table>
                        <tr>
                            <th>Caliber</th>
                            <th>Damage</th>
                            <th>Acc</th>
                            <th>Range</th>
                            <th>Weight</th>
                            <th>ROF</th>
                            <th>Cap</th>
                            <th>ST</th>
                            <th>Bulk</th>
                            <th>Recoil</th>
                            <th>Source</th>
                            <th>Page</th>
                        </tr>
                        <tr>
                            <td nowrap><span id="weaponCal1" name="weaponCal1"></span></td>
                            <td><span id="weaponDamage1" name="weaponDamage1"></span></td>
                            <td><span id="weaponAcc1" name="weaponAcc1"></span></td>
                            <td><span id="weaponRange1" name="weaponRange1"></span></td>
                            <td><span id="weaponWeight1" name="weaponWeight1"></span></td>
                            <td><span id="weaponROF1" name="weaponROF1"></span></td>
                            <td><span id="weaponCap1" name="weaponCap1"></span></td>
                            <td><span id="weaponST1" name="weaponST1"></span></td>
                            <td><span id="weaponBulk1" name="weaponBulk1"></span></td>
                            <td><span id="weaponRecoil1" name="weaponRecoil1"></span></td>
                            <td><span id="weaponSource1" name="weaponSource1"></span></td>
                            <td><span id="weaponPage1" name="weaponPage1"></span></td>
                        </tr>
                    </table>
                </span>
            </a>
        </td>
        <td>
            <select name="weapon2" id="weapon2">
            </select>
            <a href="#" class="weaponFlyouts">
                Details
                <span class="weaponMaster">
                    <img class="callout" src="images/callout.gif" />
                    <span id="weaponName2" name="weaponName2" class="weaponName"></span><img id="weaponImage2" src="">
                    <table border="1">
                        <tr>
                            <th>Caliber</th>
                            <th>Damage</th>
                            <th>Acc</th>
                            <th>Range</th>
                            <th>Weight</th>
                            <th>ROF</th>
                            <th>Cap</th>
                            <th>ST</th>
                            <th>Bulk</th>
                            <th>Recoil</th>
                            <th>Source</th>
                            <th>Page</th>
                        </tr>
                        <tr>
                            <td nowrap><span id="weaponCal2" name="weaponCal2"></span></td>
                            <td><span id="weaponDamage2" name="weaponDamage2"></span></td>
                            <td><span id="weaponAcc2" name="weaponAcc2"></span></td>
                            <td><span id="weaponRange2" name="weaponRange2"></span></td>
                            <td><span id="weaponWeight2" name="weaponWeight2"></span></td>
                            <td><span id="weaponROF2" name="weaponROF2"></span></td>
                            <td><span id="weaponCap2" name="weaponCap2"></span></td>
                            <td><span id="weaponST2" name="weaponST2"></span></td>
                            <td><span id="weaponBulk2" name="weaponBulk2"></span></td>
                            <td><span id="weaponRecoil2" name="weaponRecoil2"></span></td>
                            <td><span id="weaponSource2" name="weaponSource2"></span></td>
                            <td><span id="weaponPage2" name="weaponPage2"></span></td>
                        </tr>
                    </table>
                </span>
            </a>
        </td>
    </tr>
</table>

有更多的行，但这或多或少显示了结构。

我让 jQuery 处理第一行和第二行（第二行有子表），但我的代码在外部表和内部表之间不断混淆。

【问题讨论】：

but my code keeps getting confused -- 代码不会混淆。它执行开发人员设置的操作，开发人员可能会感到困惑。您能否添加内表和外表的基本结构，因为它们实际上显示在标记中。如果不存在确切的标记，则为您提供需要遍历外部表的解决方案将不准确。
由于目前没有实际标记，这个问题需要本地化。

标签： jquery xml html-table

【解决方案1】：

我会将您的表格拆分为 thead 和 tbody，如下所示：

<table class="someclass" border="1" id="myTable">
<thead>
    <tr>
        <th>Criteria</th>
        <th>Page</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            Stats
        </td>
        <td class="page">
        </td>
    </tr>
    <tr>
        <td>
            Row 3
        </td>
        <td class="page">
            363
        </td>
    </tr>
    <tr>
        <td>
            Row 4
        </td>
        <td class="page">
            400
        </td>
    </tr>
</tbody>
</table>

从您的描述看来，您有标题、第二行以及之后的行。在 jQuery 中，您可以执行以下操作：

//start off with your second row
var body = "<tr><td>Stats</td><td class="page"></td>";
//loop through the rest of your rows and for each row do:
body += "<tr><td>Row 3</td><td class="page">363</td>"; //etc...
//then set your tbody to have that text
$("#myTable > tbody").html(body);

【讨论】：