堆棧內存溢出
  簡體   English   中英

如何使用jQuery將特定單元格附加到外部表中的特定行

[英]How do I append a specific cell to a specific row in the outer table with jQuery

 原文  2012-12-16 16:48:21  0   1    jquery/ xml/ html-table

問題描述

我正在嘗試建立一個動態表。

前兩列是硬編碼的（認為是標題），我需要基於循環遍歷XML文件的內容來動態添加列。

第二行的每個單元格都包含一個子表。

遍歷XML文件，我如何動態地將“ XXX”添加到第三行的外部表中，將“ YYY”添加到第四行，依此類推？

-我重新張貼了更多的桌子。 請注意，每行的第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>

有更多的行，但這或多或少顯示了結構。

我在第1行和第2行（第2行有子表）上使用jQuery，但是我的代碼使外部表和內部表之間不斷混淆。

1 個解決方案

解決方案1
 0  2012-12-16 17:06:32

我將您的桌子分為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);

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在jquery中使用特定編號附加表行 如何使用jQuery從表行中的特定單元格中獲取復選框值？ 如何在jQuery中表的特定行索引上建立if語句 如何使用jquery遍歷表以選擇每一行上的特定表單元格？ 如何在js jquery中將單元格附加到表行 jQuery：如何將表格屬性動態添加到一行中的特定單元格？ jQuery - 查找包含包含特定文本的表格單元格的表格行 在jQuery中，如何找到具有特定文本的單元格的行？ jQuery：如何更改網格單元格中特定div的內容？ 如何將表行附加到具有特定類的最后一行？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM