JavaScriptで表の行選択で複数選択したい場合

Question

お世話になっております。
新人プログラマーです。
現在JavaScriptでUI開発を行っております。

###前提・実現したいこと
JavaScriptで表の行選択を行い（複数選択）、
選択可能数を設定してその選択可能数を超えたら
背景色が変わらないようにしたいです。
(選択可能数が3の時に3つまでは背景色が変わる。
それ以上は背景色が変わらないようにする。)

###該当のソースコード

      略
  <script>
  function Click_Sub(obj){
    if(obj.style.backgroundColor=='red'){
      obj.style.backgroundColor='';
    }else{
      obj.style.backgroundColor='red';
    }
  }
 </script>
      略
 <tr onclick="Click_Sub(this)">
      略

###試したこと
選択時と選択解除時の背景変更はできました。

###補足情報
追加したほうが良い情報がありましたら、
教えていただけますと幸いです。

Comments

[coco_bauer]

「制限をつけたい」というのは、具体的に何をすることですか？（何を制限するのですか？）

[_3104]

指摘ありがとうございます。

Answer 1

aria-selected 属性

x_xさんが提案されている方法と発想は同じですが、私は aria-selected 属性を使っています。
aria-selected 属性はWAI-ARIAの一種で、よく使われる属性を標準化する事でWebアクセシビリティを向上させようという試みです。

• aria-selected （ステート） - Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

<tr aria-selected="true"><td>1A</td></tr>
<tr aria-selected="true"><td>2A</td></tr>
<tr aria-selected="true"><td>3A</td></tr>
<tr aria-selected="false"><td>4A</td></tr>
<tr aria-selected="false"><td>5A</td></tr>
<tr aria-selected="false"><td>6A</td></tr>
<tr aria-selected="false"><td>7A</td></tr>
<tr aria-selected="false"><td>8A</td></tr>
<tr aria-selected="false"><td>9A</td></tr>
<tr aria-selected="false"><td>10A</td></tr>

後述の querySelectorAll によるコーディングの為だけにマークアップする場合は aria-selected="false" を削除できますが、Webアクセシビリティの観点からすれば、「選択されていないこと」を明示する為に aria-selected="false" も含めてマークアップするのが好ましいと思います。

querySelectorAll

変更されたtr要素は querySelectorAll によって拾うことが出来ます。

document.querySelectorAll('tr[aria-selected="true"]')

Re: _3104 さん

Comments

[_3104]

回答ありがとうございます。
そちらの手法でも組んでみたいと思います

Answer 2

styleを直接書き換えると管理が面倒になるので、classにしたほうがいいかもしれません。

tr.selected td { background-color: red; }

そのうえで、tbody(table)以下の対象のclassの数を数えて制限値未満かどうか判定すればいいでしょう。
element.classList
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

Comments

[_3104]

回答ありがとうございます。
まず現在の書き方で組んだあとに、classに変更してみたいと思います。

[x_x]

そうですか。classならgetElementsByClassName().lengthで済むのですが、styleまで見るとなると、ループを回さないといけないかもしれません。

[_3104]

classのほうが簡単なんですね。
現在勉強中なので様々なやり方を学んでいきたいです。
後にclassで書いてみて、またわからないことを質問させていただきます。

Answer 3

グローバル空間に現在の選択数をカウントする変数を用意しておき、
選択時に加算・選択解除時に減算するというのはどうでしょうか。
上限数も同じくグローバル空間に定義しておくと良いでしょう。

※サンプルコード書いてましたが新人さんとのことでご本人の後学のためいったん削除しました。
履歴より確認可能ですが、まずは私の冒頭のヒントを元に組んでみてください。

Comments

[_3104]

回答ありがとうございます。
参考にさせていただき、一度組んでみたいと思います。

[m.ts10806]

がんばってください。
また、「選択状態を画面遷移しても維持したい」など追加の要件がありましたら教えてください。

[_3104]

できました！
書いた後でサンプルコードをみて、変数名やコメントの
書き方など勉強になりました。
「選択状態を画面遷移しても維持したい」
まさにその要件があるので、新たな質問としてあげたいと思います。

[m.ts10806]

そうなると「現在のカウント数」を維持する仕組みがこのやり方だと微妙なところになるので、
x_xさんやthink49さんのような効率的な書き方も検討してみてください。私のは生javascriptで結構原始的なやり方なので。