堆栈内存溢出
  简体   繁体   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  9   1    jquery/ xml/ html-table

问题描述

I have a dynamic table I am trying to build. 我正在尝试建立一个动态表。

The first 2 columns are hard coded (think headers) and I need to dynamically add columns based on looping through the contents of an XML file. 前两列是硬编码的（认为是标题），我需要基于循环遍历XML文件的内容来动态添加列。

Each cell of the 2nd row contains a sub-table. 第二行的每个单元格都包含一个子表。

Looping through the XML file, how would I dynamically add "XXX" to the outer table in the 3rd row, "YYY" to the 4th row, and so on? 遍历XML文件，我如何动态地将“ XXX”添加到第三行的外部表中，将“ YYY”添加到第四行，依此类推？

--I have re-posted more of the table. -我重新张贴了更多的桌子。 Note that the contents of the 3rd and 4th cells of each row are dynamically generated from the XML (could be many more based on the XML). 请注意，每行的第3和第4单元格的内容都是根据XML动态生成的（基于XML可能会更多）。 I have hard-coded the contents for the purposes of getting help. 为了获得帮助，我对内容进行了硬编码。 There are more rows, but if I can get past this point, I should be good.-- 行数更多，但是如果我能克服这一点，那我应该很好。 

<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>

There are more rows, but this more or less shows the structure. 有更多的行，但这或多或少显示了结构。

I have jQuery working on the 1st and 2nd row (the 2nd having the sub-table), but my code keeps getting confused between the outer and inner tables. 我在第1行和第2行（第2行有子表）上使用jQuery，但是我的代码使外部表和内部表之间不断混淆。

1 个解决方案

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

I would split your table into thead and tbody as follows: 我将您的桌子分为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>

It seems from your description that you have your headers, that second row, and the rows after that. 从您的描述看来，您具有标题，第二行以及之后的行。 In jQuery you could then do the following: 在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中使用特定编号附加表行 - How to Append Table row with specific Number in jquery 如何使用jQuery从表行中的特定单元格中获取复选框值？ - How do I get the checkbox value from a specific cell in a table row using jQuery? 如何在jQuery中表的特定行索引上建立if语句 - How do I base an if statement on a specific row index of a table in jQuery 如何使用jquery遍历表以选择每一行上的特定表单元格？ - How do loop through a table to select a specific table cell on each row using jquery? 如何在js jquery中将单元格附加到表行 - how to append a cell to a table row in js jquery jQuery：如何将表格属性动态添加到一行中的特定单元格？ - jQuery: How can I dynamically add a table attribute to a specific cell in a row? jQuery - 查找包含包含特定文本的表格单元格的表格行 - jQuery - find table row containing table cell containing specific text 在jQuery中，如何找到具有特定文本的单元格的行？ - In jQuery, how do I find rows that have a cell with specific text? jQuery：如何更改网格单元格中特定div的内容？ - Jquery: How do i change the content of a specific div in a cell of a grid? 如何将表行附加到具有特定类的最后一行？ - How to append a table row towards last of a row with a specific class?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM