実現したいこと
干渉できない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);
修正内容と現在の状況
■現在のHTML状況
html
1<thead id="p-thead"> 2 <tr> 3 <th class="__description" id="th-1">品番 / 品名 色 サイズ</th> 4 <th class="__price"> 5 <div class="__total">販売価格</div> 6 <div class="__detail">(単価 × 入数)</div> 7 </th> 8 <th class="__order" id="th-3">必要数</th>undefined 9 </tr> 10 </thead>
■適応したJavaScript
js
1// thead要素を取得 2var theadElem = document.getElementById('p-thead'); 3// th要素を追加 4var cellElem = document.querySelector('#th-3').after(cellElem); 5// th要素にテキストを追加 6cellElem.appendChild(document.createTextNode('セル')); 7// th要素をtr要素に追加 8trElem.appendChild(cellElem);

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/03/13 01:37
2023/03/13 01:44
2023/03/13 01:46
2023/03/13 01:52