小計が0円の商品名も非表示にしたい。

以前別サイトで教えていただいたのですが、再度つまずいてしまいましたのでご教示願いたいです。

具体的には、class="value1"が0円のとき、class="title1"の行を非表示にしたいです。また、value3のように複数の要素の合計が0円のときtitle3の行を非表示にしたいです。(画像のように要素の合計が0円のとき商品の行も非表示にしたい）

実際の表はoptionの個数もキャラ数ももっと多いです。
初歩的な質問で恐縮ですが、よろしくお願いいたします。

html
1<form method="post" name="form">
2<table border="1">
3<tr>
4<th>詳細</th>
5<th>単価</th>
6<th>数量</th>
7<th>金額</th>
8</tr>
9
10<tr class="title1"><td colspan="4">商品1</td></tr>
11<tr class="rows">
12<td></td>
13<td class="tanka" >440円</td>
14<td ><select name="goods1">
15<option value="0" selected>0</option>
16<option value="1">1</option>
17</select></td>
18<td ><input type="text" class="price value1" size="7" value="0"> 円</td>
19</tr>
20<tr class="title2"><td colspan="4">商品2</td></tr>
21<tr class="rows">
22<td></td>
23<td class="tanka" >440円</td>
24<td ><select name="goods2">
25<option value="0" selected>0</option>
26<option value="1">1</option>
27</select></td>
28<td ><input type="text" class="price value2" size="7" value="0"> 円</td>
29</tr>
30<tr class="title3"><td colspan="4">商品3</td></tr>
31<tr class="rows">
32<td><font color="red">キャラ1</font></td>
33<td class="tanka" >605円</td>
34<td ><select name="goods3" >
35<option value="0" selected>0</option>
36<option value="1">1</option>
37</select></td>
38<td ><input type="text" class="price value3" size="7" value="0"> 円</td>
39</tr>
40<tr class="rows">
41<td><font color="blue">キャラ2</font></td>
42<td class="tanka" >605円</td>
43<td ><select name="goods4">
44<option value="0" selected>0</option>
45<option value="1">1</option>
46</select></td>
47<td ><input type="text" class="price value3" size="7" value="0"> 円</td>
48</tr>
49<a name="top"></a>
50<tr >
51<td colspan="3" >
52<button type="button" id="hide">0円を非表示</button> 合計</td>
53<td ><a name="top"></a><input type="text" id="total" size="7" value="0"> 円</td>
54</tr>
55<tr >
56<td colspan="3" >特典</td>
57<td ><input type="text" id="tokuten" size="7" value="0"> 枚</td>
58</tr>
59</table>
60</form>

javascript
1<script type='text/javascript'>
2
3const rows = document.querySelectorAll('.rows');
4const tankas = document.querySelectorAll('.tanka');
5const sels = document.querySelectorAll('select');
6const prices = document.querySelectorAll('.price');
7
8const total = document.querySelector('#total');
9const hide = document.querySelector('#hide');
10
11for (let i=0; i<rows.length; i++) {
12sels[i].addEventListener('change', function() {
13let tanka = +tankas[i].textContent.replace('円', '');
14
15prices[i].value = sels[i].value * tanka;
16let sum = 0;
17for (let j=0; j<prices.length; j++) {
18let price = +prices[j].value;
19sum += price;
20}
21total.value = sum;
22tokuten.value = Math.floor(sum/3000);
23});
24}
25
26hide.addEventListener('click', function() {
27if (hide.textContent === '0円を非表示') {
28for (let i=0; i<rows.length; i++)
29if (prices[i].value == 0) rows[i].style.display = 'none';
30hide.textContent = '0円を表示';
31} else {
32for (let i=0; i<rows.length; i++)
33if (prices[i].value == 0) rows[i].style.display = 'table-row';
34hide.textContent = '0円を非表示';
35}
36});
37</script>

deo_deo

2021/06/24 01:07

すいません、インデントをしっかり修正願います。コードを見る気になれません・・・

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

回答1件

ベストアンサー

htmlに今ではあまり使うべきではタグや、cssで指定すべき場所、
入れ子に出来ないタグが含まれているなどありますが、そこは修正していません。

html+Javascript

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" name="form">
        <table border="1">
            <tr>
                <th>詳細</th>
                <th>単価</th>
                <th>数量</th>
                <th>金額</th>
            </tr>

            <tr class="title">
                <td colspan="4">商品1</td>
            </tr>
            <tr class="rows">
                <td></td>
                <td class="tanka">440円</td>
                <td><select name="goods1">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                    </select></td>
                <td><input type="text" class="price value1" size="7" value="0"> 円</td>
            </tr>
            <tr class="title">
                <td colspan="4">商品2</td>
            </tr>
            <tr class="rows">
                <td></td>
                <td class="tanka">440円</td>
                <td><select name="goods2">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                    </select></td>
                <td><input type="text" class="price value2" size="7" value="0"> 円</td>
            </tr>
            <tr class="title">
                <td colspan="4">商品3</td>
            </tr>
            <tr class="rows">
                <td>
                    <font color="red">キャラ1</font>
                </td>
                <td class="tanka">605円</td>
                <td><select name="goods3">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                    </select></td>
                <td><input type="text" class="price value3" size="7" value="0"> 円</td>
            </tr>
            <tr class="rows">
                <td>
                    <font color="blue">キャラ2</font>
                </td>
                <td class="tanka">605円</td>
                <td><select name="goods4">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                    </select></td>
                <td><input type="text" class="price value3" size="7" value="0"> 円</td>
            </tr>
            <a name="top"></a>
            <tr>
                <td colspan="3">
                    <button type="button" id="hide">0円を非表示</button> 合計
                </td>
                <td><a name="top"></a><input type="text" id="total" size="7" value="0"> 円</td>
            </tr>
            <tr>
                <td colspan="3">特典</td>
                <td><input type="text" id="tokuten" size="7" value="0"> 枚</td>
            </tr>
        </table>
    </form>
    <script>

        const rows = document.querySelectorAll('.rows');
        const tankas = document.querySelectorAll('.tanka');
        const sels = document.querySelectorAll('select');
        const prices = document.querySelectorAll('.price');
        const title = document.getElementsByClassName('title');

        const total = document.querySelector('#total');
        const hide = document.querySelector('#hide');

        for (let i=0; i<rows.length; i++) {
            sels[i].addEventListener('change', function () {
                let tanka = +tankas[i].textContent.replace('円', '');
                prices[i].value = sels[i].value * tanka;
                let sum = 0;
                for (let j = 0; j < prices.length; j++) {
                    let price = +prices[j].value;
                    sum += price;
                }
                total.value = sum;
                tokuten.value = Math.floor(sum / 3000);
            });
        }

        hide.addEventListener('click', function() {
            if (hide.textContent === '0円を非表示') {
                titleHide();
            for (let i=0; i<rows.length; i++)
                if (prices[i].value == 0) rows[i].style.display = 'none';
                hide.textContent = '0円を表示';
                } else {
                titleShow();
            for (let i=0; i<rows.length; i++)
                if (prices[i].value == 0) rows[i].style.display = 'table-row';
                hide.textContent = '0円を非表示';
                }
        });

        const titleHide = () => {
            if (prices[0].value == 0) {
                title[0].style.display = 'none';
            };

            if (prices[1].value == 0) {
                title[1].style.display = 'none';
            };

            if (prices[2].value == 0 && prices[3].value == 0) {
                title[2].style.display = 'none';
            };
        }

        const titleShow = () => {
            for (let i = 0; i < title.length; i++) {
                title[i].style.display = '';

            }
        }

    </script>
</body>

</html>

投稿2021/06/24 07:13