tableに、ボタンで追加した行にCSSを適用させる方法

###ボタンを押した後JSによって追加される行にCSSが適用されません。

参考サイトを元にしているため参考元URLを記載します。
Qiita テーブル操作系（行追加など）

■やりたいこと
現在の状態ですと行が追加された後CSSが適用されていない行が追加されるため、
ボタンを押した後CSSが適用された行を追加したいです。

現在のソースは下記です。

js
1<script>
2        /**
3         * 対象行の追加
4         * @param テーブル要素
5         */
6        var addLine = function(tblEl) {
7
8            // テーブルの要素取得
9            var table = document.getElementById(tblEl);
10
11            // 行を行末に追加
12            // 0指定で先頭追加
13            var tr = table.insertRow(-1);
14
15            // セルの挿入
16
17            // 0指定で先頭挿入
18            var td1 = tr.insertCell(-1),
19                td2 = tr.insertCell(-1),
20                td3 = tr.insertCell(-1),
21                td4 = tr.insertCell(-1),
22                td5 = tr.insertCell(-1);
23
24            // input用 タグ
25            var tag1 = '<td class="mail_tx2"><input type="text" value="" /></td>',
26                tag2 = '<td class="mail_tx2"><input type="text" value="" /></td>',
27                tag3 = '<td class="mail_tx2"><input type="text" value="" /></td>',
28                tag4 = '<td class="mail_tx2"><input type="text" value="" /></td>';
29            // ボタン用 タグ
30            var button = '<td class="mail_tx3"><input type="button" value="行削除" onclick="delLine(this)" /></td>';
31
32
33            // 行数取得
34            var row_len = table.rows.length;
35
36            // セルへ要素を挿入する
37            td1.innerHTML = tag1;
38            td2.innerHTML = tag2;
39            td3.innerHTML = tag3;
40            td4.innerHTML = tag4;
41            td5.innerHTML = button;
42        }
43
44        /**
45         * 対象行の削除
46         * @param input
47         */
48        var delLine = function(targetEl) {
49
50            // inputの親要素のtrを取得する
51            tr = targetEl.parentNode.parentNode;
52
53            // 対象のtr行を削除する
54            tr.parentNode.deleteRow(tr.sectionRowIndex);
55        }
56    </script>

html
1<body>
2    <div class="mail">
3        <input type="button" value="行追加" onclick="addLine('variable_tbl')" />
4        <table class="mail_table" id="variable_tbl">
5            <tr>
6                <td class="mail_tx2"><input type="text" value="" /></td>
7                <td class="mail_tx2"><input type="text" value="" /></td>
8                <td class="mail_tx2"><input type="text" value="" /></td>
9                <td class="mail_tx2"><input type="text" value="" /></td>
10                <td class="mail_tx3"><input type="button" value="行削除" onclick="delLine(this)" /></td>
11            </tr>
12            <tr>
13                <td class="mail_tx2"><input type="text" value="" /></td>
14                <td class="mail_tx2"><input type="text" value="" /></td>
15                <td class="mail_tx2"><input type="text" value="" /></td>
16                <td class="mail_tx2"><input type="text" value="" /></td>
17                <td class="mail_tx3"><input type="button" value="行削除" onclick="delLine(this)" /></td>
18            </tr>
19            <tr>
20                <td class="mail_tx2"><input type="text" value="" /></td>
21                <td class="mail_tx2"><input type="text" value="" /></td>
22                <td class="mail_tx2"><input type="text" value="" /></td>
23                <td class="mail_tx2"><input type="text" value="" /></td>
24                <td class="mail_tx3"><input type="button" value="行削除" onclick="delLine(this)" /></td>
25            </tr>
26        </table>
27    </div>
28</body>

css
1.mail {
2    margin: auto;
3    margin-top: 20px;
4    max-width: 1200px;
5    text-align: center;
6}
7.mail_table {
8    vertical-align: middle;
9    max-width: 100%;
10    border-collapse: collapse;
11    border: 1px solid #999;
12}
13.mail_tx1 {
14    width: 300px;
15    color: #fff;
16    border-bottom: 1px solid #999;
17    border-left: 1px solid #999;
18    background-color: #b1b1b1;
19}
20.mail_tx2 {
21    height: 20px;
22    width: 300px;
23    padding: 6px;
24    background-color: #fff;
25    border-bottom: 1px solid #999;
26    border-left: 1px solid #999;
27    border-right: 1px solid #999;
28}
29.mail_tx3 {
30    height: 20px;
31    width: 60px;
32    padding: 6px;
33    background-color: #fff;
34    border-bottom: 1px solid #999;
35    border-left: 1px solid #999;
36}

お手数をおかけいたしますが、どうかご教示いただけますと幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

下記の様に修正してみては如何でしょうか？

修正①

javascript
1// input用 タグ(tdは不要)
2var tag1 = '<input type="text" value="" />',
3    tag2 = '<input type="text" value="" />',
4    tag3 = '<input type="text" value="" />',
5    tag4 = '<input type="text" value="" />';

修正②(ClassNameを追加)

javascript
1//最後にclassNameを追加
2td1.className = 'mail_tx2';
3td2.className = 'mail_tx2';
4td3.className = 'mail_tx2';
5td4.className = 'mail_tx2';
6td5.className = 'mail_tx3';

投稿2017/07/20 01:52

編集2017/07/20 02:08

motuo

総合スコア3027

m.ts10806

2017/07/20 02:02

こちらの方が記述方法に統一感が出て読みやすいですね。勉強になります。

退会済みユーザー

2017/07/21 05:22

回答ありがとうございます。こちらをベストアンサーといたします。

行動規範の内容に同意します

※回答とコード部分を修正しました

ブラウザの開発ツールで見ますと、追加した行のcssクラスが消えてますね。
→というよりinsertCellでtd要素を作ってるのでinnerHTMLでtd入れても重複タグとなるため打ち消していてtag1に入れたtd～/tdが無効になっている感じですね。

以下のようにcssクラスを追加してはどうでしょうか。

javascript
1// input用 タグ
2var tag1 = '<input type="text" value="" />',
3
4～～省略
5td1.innerHTML = tag1;
6td1.classList.add('mail_tx2'); //cssクラスを追加
7
8～～省略
9