座席表を作っています。(1)切り替えのときにうまく色が抜けません。(2)島が複数になったらどのようにしたらいいでしょうか。

Question

前提・実現したいこと

座席表を作っています。
どの席にどの部署の人が座っているか、端的に言えばフロアの陣取り表みたいなものです。
ボタンを押すとトグルで部署が入ったりカラになったりします。島ごとに一括で席を埋めたりカラにしたりしたいです。

<select id="busho">
    <option value="busho1">busho1</option>
    <option value="busho2">busho2</option>
    <option value="busho3">busho3</option>
</select>
<br/>
<table id="S-1" border="1">
    <tbody>
        <tr>
            <td class="tbltd" rowspan="2"><input class="btnZaseki alls1" id="simas1all" type="button" value="全部をxに" /></td>
            <td class="tbltd"><input class="btnZaseki zaseki simas1" id="aa" type="button" value="x" /></td>
            <td class="tbltd"><input class="btnZaseki zaseki simas1" id="ab" type="button" value="x" /></td>
            <td class="tbltd"><input class="btnZaseki zaseki simas1" id="ac" type="button" value="x" /></td>
        </tr>
        <tr>
            <td class="tbltd"><input class="btnZaseki zaseki simas1" id="ba" type="button" value="x" /></td>
            <td class="tbltd"><input class="btnZaseki zaseki simas1" id="bb" type="button" value="x" /></td>
            <td class="tbltd"><input class="btnZaseki zaseki simas1" id="bc" type="button" value="x" /></td>
        </tr>
    </tbody>
</table>
<h2>各部座席数</h2>
<div>合計：<span id="numAll"></span></div>
<div>busho1：<span id="numbusho1"></span></div>
<div>busho2：<span id="numbusho2"></span></div>
<div>busho3：<span id="numbusho3"></span></div>

.tbltd {
    width: 13em;
    height: 5em;
    text-align: center;
    vertical-align: middle;
}

.zaseki {
    width: 12em;
    height: 4em;
    background-color: white;
}

.zaseki.colorx {
    background-color: white;
}

.zaseki.colorbusho1 {
    background-color: blue;
}

.zaseki.colorbusho2 {
    background-color: pink;
}

.zaseki.colorbusho3 {
    background-color: yellow;
}

    $(function() {
        countZaseki();
        var bushoCD = 'busho1';
        $('#busho').change(function() {
            bushoCD = $('#busho').val();
        });

        $('.alls1').on('click', function() {
            if ($(this).val() == '全部埋める') {
                $(this).val('全部をxに');
                $('.simas1').val(bushoCD).removeClass('colorx').addClass('color' + bushoCD);
                $('.sima').html(bushoCD);
            } else {
                $(this).val('全部埋める');
                $('.simas1').each(function() {
                    remClass('.simas1');
                });
                $('.simas1').val('x').addClass('colorx');
                $('.sima').html('x');
            }
        });

        $('.zaseki').on('click', function() {
            if ($(this).val() == 'x') {
                $(this).val(bushoCD).removeClass('colorx').addClass('color' + bushoCD);
                $('#' + this.id + '-ko').html(bushoCD);
            } else {
                remClass(this);
                $(this).val('x').addClass('colorx');
                $('#' + this.id + '-ko').html('x');
                $(this).next('div').html('');
            }
        });

        $('.btnZaseki').on('click', function() {
            countZaseki();
        });

        function countZaseki() {
            var numbusho1 = 0;
            var numbusho2 = 0;
            var numbusho3 = 0;
            $('.zaseki').each(function() {
                if ($(this).val() == 'busho1') {
                    numbusho1++;
                } else if ($(this).val() == 'busho2') {
                    numbusho2++;
                } else if ($(this).val() == 'busho3') {
                    numbusho3++;
                }
            });

            //集計
            $('#numAll').html($('.zaseki').length);
            $('#numbusho1').html(numbusho1);
            $('#numbusho2').html(numbusho2);
            $('#numbusho3').html(numbusho3);
        }

        function remClass(obj) {
            var classVal = $(obj).attr('class');
            alert(classVal);
            var classVals = classVal.split(' ');
            for (var i = 0; i < classVals.length; i++) {
                if (classVals[i].indexOf('color') !== -1) {
                    $(obj).removeClass(classVals[i]);
                }
            }
        }

    });

発生している問題

(1) 部署が入っているときに色が塗られて、カラになったら色が抜けるようにしたいのですが、一括で席を空にするときに部分的にうまく色が抜けないことがあります。
(2) これは、ほんとはもっと島が多いフロア（60島くらい）なんですが、その場合はこのコードをどうやったらうまく複数の島を操作できるようになるのでしょうか。（こちらは自分でもいろいろ勉強中です、thisおぼえたばっかりなので使いかたおかしいかもしれません）

補足情報（FW/ツールのバージョンなど）

Windows10です。

Comments

[yambejp]

仕様が確定できません、もうすこしくわしく提示してください、「全部をxに」と「全部埋める」を排他処理にしていますが、両方表示したほうがよいのでは？

[sumire_cl]

「どの部署がどこの席を取っているのか色分けで見たい」「席ごとに席をとったり、島まるごと取ったりしたい」というのがリクエストのすべてです。（たぶんできてから「やっぱりこれが…」という後出し要件追加はあると思いますが…）島ごとに「全部をxに」「全部埋める」の2個のボタンを用意したほうがよいということですか？

Answer 1

こんな感じですかね？

.zaseki.colorx {
    background-color: white;
}

.zaseki.colorbusho1 {
    background-color: blue;
}

.zaseki.colorbusho2 {
    background-color: pink;
}

.zaseki.colorbusho3 {
    background-color: yellow;
}

$(function(){
  
  $('.zaseki').on('click',function(){
    $(this).val($('[name=busho]:checked').val());
  });
  $('#umeru').on('click',function(){
    $('.zaseki').val($('[name=busho]:checked').val());
  });
  $('#zenbux').on('click',function(){
    $('.zaseki').val('x');
  });
  $('.zaseki,#umeru,#zenbux').on('click',function(){
    $('.zaseki').removeClass('colorx colorbusho1 colorbusho2 colorbusho3')
      .filter(function(){return $(this).val()=="x";}).addClass('colorx')
      .end().filter(function(){return $(this).val()=="busho1";}).addClass('colorbusho1')
      .end().filter(function(){return $(this).val()=="busho2";}).addClass('colorbusho2')
      .end().filter(function(){return $(this).val()=="busho3";}).addClass('colorbusho3');
    $('#numAll').text($('.zaseki:not([value=x])').length);
    $('#numbusho1').text($('.zaseki[value=busho1]').length);
    $('#numbusho2').text($('.zaseki[value=busho2]').length);
    $('#numbusho3').text($('.zaseki[value=busho3]').length);
  });
  $('#zenbux').trigger('click');
});

<label><input type="radio" name="busho" value="busho1" checked>busho1</label>
<label><input type="radio" name="busho" value="busho2">busho2</label>
<label><input type="radio" name="busho" value="busho3">busho3</label>
<br/>
<table id="t1" border="1">
<tbody>
<tr>
<td class="tbltd" rowspan="2">
<input id="zenbux" type="button" value="全部をxに" /><br>
<input id="umeru" type="button" value="全部埋める" /><br>
</td>
<td class="tbltd"><input class="zaseki" type="button" value="x" /></td>
<td class="tbltd"><input class="zaseki" type="button" value="x" /></td>
<td class="tbltd"><input class="zaseki" type="button" value="x" /></td>
</tr>
<tr>
<td class="tbltd"><input class="zaseki" type="button" value="x" /></td>
<td class="tbltd"><input class="zaseki" type="button" value="x" /></td>
<td class="tbltd"><input class="zaseki" type="button" value="x" /></td>
</tr>
</tbody>
</table>
<h2>各部座席数</h2>
<div>合計：<span id="numAll"></span></div>
<div>busho1：<span id="numbusho1"></span></div>
<div>busho2：<span id="numbusho2"></span></div>
<div>busho3：<span id="numbusho3"></span></div>

Comments

[sumire_cl]

ありがとうございます！
endはよくわからなくて今まであまり使ってなかったのですが
そっかこうやって使うんですね。
写経したり真似したりしていま理解中です。理解速度がたいへんゆっくりなのでもう少し勉強時間をください。

Answer 2

皆様のアドバイスをもとにいろいろ考えたり作ったり潰したりして
なんかできました！
長くなったのでQiitaに書きました

この形でちゃんとしてるかどうかはわかんないですが……

ありがとうございました！一層勉強に励みます。