実現したいこと
干渉できないHTMLの中にあるtableに項目<th>を追加したいです。
前提
Bcartというカートシステムを使い、干渉できないHTMLのページをカスタマイズしています。
知識のない状態から独学で行っている状況です。
直接htmlを触れないため、JavaScriptを使っています。
jqueryでも構わないのですが、方法が見つけられませんでした。
内容
thead要素の中に既にある<tr>の中に<th>を追加したいのですが、作成したJavaScriptを起動させると、既存</tr>の下に新しく<tr>と<th>が生成されてしまいます。
→HTMLソースの11行目
どうすれば既存<th class="__order" id="th-3">必要数</th>の直下に<th>が追加できるのでしょうか?
→HTMLソースの9~10行目の間
知識と理解不足で申し訳ないのですが、お力添えをいただけますと大変嬉しいです。
どうぞ、よろしくお願いいたします。
該当のソースコード
■作成したJavaScriptを適応させた後のhtmlソース
html
1<table id="tab-1">2 <thead id="p-thead">3 <tr>4 <th class="__description" id="th-1">品番 / 品名 色 サイズ</th>5 <th class="__price">6 <div class="__total">販売価格</div>7 <div class="__detail">(単価 × 入数)</div>8 </th>9 <th class="__order" id="th-3">必要数</th>10 </tr>11 <tr><th>セル</th></tr>12 </thead>13 <tbody>14 <tr class="__item __item--1 ">15 <td class="__description">16 <h2 class="__name">17 ABS_BK_D00200-1000 / ABS 黒 φ10×L1000 </h2>18 19 <div class="__spec"></div>20 </td>21 <td class="__price">22 <div class="__heading">23 <div class="__total">販売価格</div>24 <div class="__detail">(単価 × 入数)</div>25 <div class="__body">26 <div class="__total"><span class="c-tax-price __tax-price __is-none">1,100,000円</span></div>27 <div class="__detail">28 (<span class="__unit-price"><span class="c-tax-price __tax-price __is-none">1,100,000円</span></span> × <span class="__quantity">1</span><span class="__unit"></span>)</div>29 </td>30 <td class="__order">31 <div class="__error c-alert c-alert--danger __js-add-cart-error" style="display: none;"></div>32 <div class="__heading">注文数</div>33 <div class="__body">34 <div class="__input">35 <input placeholder="0" class="__js-order-count __js-disabled-enter-key" name="p[1]" type="number"><span class="__spin p-spin"><span class="__minus __js-spin"></span><span class="__plus __js-spin"></span></span></div>36 <dl class="__cart-count __js-cart-count" style="display: none;">37 <dt>追加済</dt>38 <dd>0</dd>39 </dl>40 <div class="__notice">41 <dl class="__min-max-order">42 <dt>注文可能数</dt>43 <dd class="__min">44 <span class="__title">最小</span>45 <span class="__count">1</span>46 </dd>47 </dl>48 49 </td>50 </tr>51 </tbody>52</table>
■作成したJavaScriptソース
js
1// thead要素を取得2var theadElem = document.getElementById('p-thead');3// thead要素にtr要素(行)4var trElem = theadElem.insertRow();5// th要素をtr要素に追加6trElem.appendChild(cellElem);
0 コメント