作成しようとしている動的テーブルがあります。
最初の 2 列はハード コードされており (ヘッダーと考えてください)、XML ファイルのコンテンツのループ処理に基づいて動的に列を追加する必要があります。
2 行目の各セルには、サブテーブルが含まれています。
XML ファイルをループして、外側のテーブルの 3 行目に「XXX」、4 行目に「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 を使用していますが、外部テーブルと内部テーブルの間でコードが混乱し続けています。