ここから本文です

以下のHTMLにjavascriptで名前の右に性別の列を追加したいのですが、 どうすれば...

アバター

ID非公開さん

2018/7/400:21:59

以下のHTMLにjavascriptで名前の右に性別の列を追加したいのですが、
どうすればよいのでしょうか。

以下だと行は追加できるのですが、
列を名前の右側に追加したい場合はどうすればよいのでしょうか。




var table = document.querySelector('table tbody');

var tr = document.createElement('tr');
var td1 = document.createElement('td'),
td2 = document.createElement('td'),
td3 = document.createElement('td'),
td4 = document.createElement('td');



td1.innerText = '東京';
td2.innerText = '佐伯';
td3.innerText = '☆☆';
td4.innerText = '55';

tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);

table.append(tr);




<table>
<thead>
<tr><th class="todou">都道府県</th><th class="namae">名前</th><th class="nin">人気</th><th class="nenrei">年齢</th></tr>
</thead>
<tbody>
<tr><td class="ttt">東京</td><td class="nnn">佐藤</td><td class="ni">☆☆☆☆☆</td><td>55</td></tr>
<tr><td class="ttt">東京</td><td class="nnn">田中</td><td class="ni">☆☆☆☆</td><td>23</td></tr>
<tr><td class="ttt">東京</td><td class="nnn">森</td><td class="ni">☆☆☆</td><td>42</td></tr>
<tr><td class="ttt">東京</td><td class="nnn">佐々木</td class="ni"><td>☆☆☆</td><td>19</td></tr>
<tr><td class="ttt">東京</td><td class="nnn">吉田</td><td class="ni">☆☆</td><td>23</td></tr>

</tbody>

</table>

閲覧数:
28
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

piy********さん

2018/7/416:26:22

まずはじめに、1列分を一度に追加するような関数はありません。
これは、HTMLのテーブルの仕組みでそうなっています
(trで先に行を定義し、その中にtd,thをいくつ入れるかで各行の列数が決まるためです)。

ですので、各行に対して、名前セルの後ろに性別セルを追加する処理を実行する必要があります。

要素を挿入するには、
appendChild(末尾に追加)
insertBefore(指定した要素の前に追加)
が使用できます。
「insertAfter」のような、後ろに追加する関数はありません。insertBeforeで代用できるためです。
今回は名前セルの後ろに追加したいので、名前セルの後ろの要素を取得し、その前に追加する流れになります。

1. 行要素(tr)を取得
2. 行要素から名前セル要素(th/td)を取得
3. 名前セル要素からその後ろの要素を取得(th/td)
4. 追加する性別セルを生成
5. 名前セルの後ろの要素の前に性別セルを追加

// 見出し行に列を追加
// 1
var headRow = document.querySelector('table>thead>tr');
// 2
var nameHeadCell = headRow.querySelector('.namae');
// 3
var nameHeadNextCell = nameHeadCell.nextSibling;
// 4
var sexHeadCell = document.createElement('th');
sexHeadCell.innerText = '性別';
sexHeadCell.className = 'sex';
// 5
headRow.insertBefore(sexHeadCell, nameHeadNextCell);

// 各データ行に列を追加
// 1 ... tbodyの行は複数あるので繰り返し処理します
var bodyRows = document.querySelectorAll('table>tbody>tr');
bodyRows.forEach(function (bodyRow) {
// 2
// var nameCell = bodyRow.querySelector('.nnn'); // ... 追加した行にクラスがついていないためNG
var nameCell = bodyRow.querySelector('td:nth-child(2)');
// 3
var nameNextCell = nameCell.nextSibling;
// 4
var sexCell = document.createElement('td');
var sex = '男性';
sexCell.innerText = sex;
sexCell.className = 'sex';
// 5
bodyRow.insertBefore(sexCell, nameNextCell);
});

  • piy********さん

    2018/7/416:28:13

    ちなみに、名前セルが行の一番最後である場合、私のコードで言うところの「nameHeadNextCell」「nameNextCell」はnullになりますが、その場合はinsertBeforeの仕様で行の末尾に追加されるため、問題なく動作します。

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

アバター

質問した人からのコメント

2018/7/4 17:40:09

できるようになりました。

この度はありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる