テーブルの中のセレクトボックスの値が０のとき、非表示にしたい

締切済

質問者：mokke3
質問日時：2022/05/29 10:13
回答数：3件

こんにちは。

「商品名」「価格」「数量」のテーブルで
注文フォームを作っています。

「数量」の部分をセレクトボックスにしており、
０〜３の値が選択でき、初期値は０です。

フォームの確認画面へ移行したときに数量が０の行を非表示にしたいと思っており、

JavaScriptで以上のようなことを実装できないか模索しております。

ヒントでも結構ですので、お教えいただけると助かります。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： tknakamuri
回答日時：2022/05/30 08:09

例えば、商品ひとつがtrタグ一行なら

JSでその行(trタグ)を削除するとか
dispiay styleをnone に変更するのがかんたんです。

ただ、確認画面ということなら
最初からその行をブラウザに送らないのが
普通でしょう。

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2022/05/29 16:38

こんにちは

＞JavaScriptで以上のようなことを実装できないか模索しております
「表示/非表示」だけの話なら、難しいことではないと思いますけれど・・・

＞注文フォームを作っています。
とのことですので、確認画面に遷移する前に、サーバに送信しているのではないでしょうか？
もしそうであるなら、サーバ側で処理を行うのが常道かと。

それとも、送信はせずに、そのままのページで確認画面にしているということでしょうか？
もしそうであるなら、その仕組みやHTMLの構成がどうなっているのか不明ですけれど、
<table id="hoge">
　・・・・・
　<tr><td></td><td></td>
　　<td><select></select><td>
　</tr>
　・・・・・
</table>
のような構成になっているものと推測しますので、select要素から見て祖先要素のtrを表示/非表示すれば良いことになると思われます。

＞ヒントでも結構ですので、お教えいただけると助かります。
処理のタイミングも不明ですが、該当するイベント処理内で
document.querySelectorAll('#hoge select').forEach(e=>{
e.closest('tr').style.display = (e.value == 0)?'none':'';
});
などとしておくことで、表内のselectの値が0の行(=tr)は非表示になります。

- 0
- 件

通報する

No.1

回答者： sukitaro
回答日時：2022/05/29 11:51

こんな感じでしょうか。

<body>
<section id="order">
<form id="order-form">
<table id="order-table">
<thead><tr>
<td>商品名</td>
<td>価格</td>
<td>数量</td>
</tr></thead>
</table>
<input id="order-btn" type="button" value="確認" />
</form>
</section>
<section id="confirm" style="display:none;">
<form id="confirm-form">
<table id="confirm-table">
<thead><tr>
<td>商品名</td>
<td>価格</td>
<td>数量</td>
</tr></thead>
</table>
<input type="submit" value="購入" />
</form>
</section>
<script>
const data = [
{name: "aaa", price: 100, number: 0},
{name: "bbb", price: 130, number: 0},
{name: "ccc", price: 150, number: 0},
];

class Table {
constructor(section_name){
this.section_name = section_name;
if(section_name === 'order'){
this.disp(data);
}else if(section_name === 'confirm') {
this.disp(data.filter(d => d.number !== 0));
}
}
disp(data){
const tbody = document.getElementById(`${this.section_name}-table`).createTBody();
data.forEach((d, idx) => {
const newRow = tbody.insertRow(-1);
newRow.insertCell(0).appendChild(document.createTextNode(d.name));
newRow.insertCell(1).appendChild(document.createTextNode(d.price));
const number_element = d.number === 0? this.select(idx) : document.createTextNode(d.number);
newRow.insertCell(2).appendChild(number_element);
});
}
select(idx){
const select = document.createElement('select');
[0, 1, 2, 3].forEach(num => {
const option = document.createElement('option');
option.value = num;
option.textContent = num;
select.appendChild(option);
});
select.addEventListener('change', (e)=>{
data[idx].number = e.target.value;
}, false);
return select;
}
}

// 実行
const order_table = new Table('order');
document.addEventListener('click', e => {
if(e.target === document.getElementById('order-btn')) {
document.getElementById('order').style.display = 'none';
document.getElementById('confirm').style.display = 'block';
const confirm_table = new Table('confirm');
}
}, false);
</script>
</body>