[SharePoint2010]クリックして手軽に更新できる座席表を作成してみました。

作ったわけ

部署単位ではかたまって座っているんですが、席替えが頻繁で、
あの部署どこらへんにいるんだっけ？というのが頻繁に変わるため
更新がパパッとクリックしてできるような座席表があったらいいなあと……。

画面イメージ

フロアにぐるりと島があるような感じです。
とりあえず10島、1島の最大座席数は16席。
丸く囲むと真ん中が空いちゃってもったいないので、部署ごとの座席数を表示するようにしてみました。

座席状況はSharePointリストに保存します。

ここの例では、このリストはlistZasekiSampleという名前にしています。
既存のタイトル列に島名を3文字で表記したもの（この例でいうとS01,S02など）が入ります。
za～zpまで16列作成します。全部1行テキストです。
列の名前がza,zb…とかである理由は、なんでかわからないんですがSharePointの列名に数字とかを混ぜると勝手にエンコードされたような内部名になっちゃうことが頻発するので、半角英字のみ使うようにしています。
なんで勝手にエスケープシーケンスみたいなのがついたりしちゃうんでしょう……数字も半角なのに……

1行1島。なので、島の増減は、このリストの行を増減して対応します。
リストを読んだり書いたりするのは SPServices を使っています。

書いたコード

CSS

    .tableBorder1 {
        border-collapse: collapse;
    }

    .tableMigiYose {
        margin-left: auto;
        margin-right: 0;
    }

    .tableHidariYose {
        margin-left: 0;
        margin-right: auto;
    }

    .tableUe {
        margin-bottom: 1em;
        padding-bottom: 1em;
        vertical-align: bottom;
    }

    .tableShita {
        margin-top: 1em;
        padding-top: 1em;
        vertical-align: top;
    }

    .tableTate {
        width: 65em;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .tableBorder1,
    .tableBorder1 td,
    .tableBorder1 th {
        border: 1px solid black;
        padding: 0.5em;
    }

    .tableBorder1 td,
    .tableBorder1 th {
        text-align: center;
    }

    .tableBorder1 .simaName {
        font-weight: bold;
        font-size: 2em;
    }

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

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

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

    .zaseki.color部署01 {
        background-color: cyan;
    }

    .zaseki.color部署02 {
        background-color: pink;
    }

    .zaseki.color部署03 {
        background-color: yellow;
    }

    .zaseki.color部署04 {
        background-color: palegreen;
    }

    .zaseki.color部署05 {
        background-color: violet;
    }

    .zaseki.color部署06 {
        background-color: darkkhaki;
    }

    .zaseki.color部署07 {
        background-color: orange;
    }

    .bgColorCenter {
        background-color: lightsteelblue;
        border: 0px;
        border-collapse: separate;
        border-spacing: 0px;
        padding: 3em;
    }

    .honbuCenter {
        border: seagreen 5px ridge;
        padding: 3em;
        margin: 8em;
        width: 30em;
    }

部署選択

座席をクリックすると、ここで選択した部署名が入ります。

<div style="overflow:auto;">
    <div>
        <select id="busho">
            <option value="部署01">部署01</option>
            <option value="部署02">部署02</option>
            <option value="部署03">部署03</option>
            <option value="部署04">部署04</option>
            <option value="部署05">部署05</option>
            <option value="部署06">部署06</option>
            <option value="部署07">部署07</option>
        </select>
    </div>
</div>

座席表

フロアレイアウトが変わるごとにここを書き直すのが一番めんどくさいかも……

<table>
    <tr>
        <td colspan="4" align="center">
            <table>
                <tr class="tableUe">
                    <td>
                        <table id="S01" class="tableBorder1">
                            <tbody>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-01" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-02" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-03" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-04" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-05" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-06" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-07" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S01-08" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd" colspan="2"><span class="simaName">S-1</span><br><input class="allo" id="S01-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S01-allx" type="button" value="全部を空に" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <table id="S02" class="tableBorder1">
                            <tbody>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-01" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-02" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-03" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-04" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-05" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-06" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-07" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S02-08" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd" colspan="2"><span class="simaName">S-2</span><br><input class="allo" id="S02-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S02-allx" type="button" value="全部を空に" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <table id="S03" class="tableBorder1">
                            <tbody>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-01" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-02" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-03" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-04" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-05" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-06" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-07" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-08" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-09" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-10" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-11" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S03-12" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd" colspan="2"><span class="simaName">S-3</span><br><input class="allo" id="S03-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S03-allx" type="button" value="全部を空に" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="tableTate">
            <table id="S04" class="tableBorder1 tableHidariYose">
                <tbody>
                    <tr>
                        <td class="tbltd"><input class="zaseki color空" id="S04-02" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-04" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-06" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-08" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-10" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-12" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-14" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-16" type="button" value="空" /></td>
                        <td class="tbltd" rowspan="2"><span class="simaName">S-4</span><br><input class="allo" id="S04-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S04-allx" type="button" value="全部を空に" /></td>
                    </tr>
                    <tr>
                        <td class="tbltd"><input class="zaseki color空" id="S04-01" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-03" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-05" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-07" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-09" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-11" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-13" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S04-15" type="button" value="空" /></td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td colspan="2" rowspan="3" style="vertical-align: top; position: relative;" class="bgColorCenter">

            <div class="honbuCenter">
                <h2>各部署座席数</h2>
                <div>合計：<span id="numAll"></span></div>
                <div>部署01：<span id="numB01"></span></div>
                <div>部署02：<span id="numB02"></span></div>
                <div>部署03：<span id="numB03"></span></div>
                <div>部署04：<span id="numB04"></span></div>
                <div>部署05：<span id="numB05"></span></div>
                <div>部署06：<span id="numB06"></span></div>
                <div>部署07：<span id="numB07"></span></div>
            </div>
            <div style="display:none">
                <div class="sima" id="01">空</div>
                <div class="sima" id="02">空</div>
                <div class="sima" id="03">空</div>
                <div class="sima" id="04">空</div>
                <div class="sima" id="05">空</div>
                <div class="sima" id="06">空</div>
                <div class="sima" id="07">空</div>
                <div class="sima" id="08">空</div>
                <div class="sima" id="09">空</div>
                <div class="sima" id="10">空</div>
                <div class="sima" id="11">空</div>
                <div class="sima" id="12">空</div>
                <div class="sima" id="13">空</div>
                <div class="sima" id="14">空</div>
                <div class="sima" id="15">空</div>
                <div class="sima" id="16">空</div>
                <div class="sima" id="iid">S01</div>
            </div>
        </td>
        <td class="tableTate">
            <table id="S05" class="tableBorder1 tableMigiYose">
                <tbody>
                    <tr>
                        <td class="tbltd" rowspan="2"><span class="simaName">S-5</span><br><input class="allo" id="S05-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S05-allx" type="button" value="全部を空に" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-02" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-04" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-06" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-08" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-10" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-12" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-14" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-16" type="button" value="空" /></td>
                    </tr>
                    <tr>
                        <td class="tbltd"><input class="zaseki color空" id="S05-01" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-03" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-05" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-07" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-09" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-11" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-13" type="button" value="空" /></td>
                        <td class="tbltd"><input class="zaseki color空" id="S05-15" type="button" value="空" /></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr></tr>
    <td class="tableTate">
        <table id="S06" class="tableBorder1 tableHidariYose">
            <tbody>
                <tr>
                    <td class="tbltd"><input class="zaseki color空" id="S06-15" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-13" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-11" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-09" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-07" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-05" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-03" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-01" type="button" value="空" /></td>
                    <td class="tbltd" rowspan="2"><span class="simaName">S-6</span><br><input class="allo" id="S06-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S06-allx" type="button" value="全部を空に" /></td>
                </tr>
                <tr>
                    <td class="tbltd"><input class="zaseki color空" id="S06-16" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-14" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-12" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-10" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-08" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-06" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-04" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S06-02" type="button" value="空" /></td>
                </tr>
            </tbody>
        </table>
    </td>
    <td class="tableTate">
        <table id="S07" class="tableBorder1 tableMigiYose">
            <tbody>
                <tr>
                    <td class="tbltd" rowspan="2"><span class="simaName">S-7</span><br><input class="allo" id="S07-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S07-allx" type="button" value="全部を空に" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-02" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-04" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-06" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-08" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-10" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-12" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-14" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-16" type="button" value="空" /></td>
                </tr>
                <tr>
                    <td class="tbltd"><input class="zaseki color空" id="S07-01" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-03" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-05" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-07" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-09" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-11" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-13" type="button" value="空" /></td>
                    <td class="tbltd"><input class="zaseki color空" id="S07-15" type="button" value="空" /></td>
                </tr>
            </tbody>
        </table>
    </td>
    </tr>
    <tr>
        <td colspan="4" align="center">
            <table>
                <tr class="tableShita">
                    <td>
                        <table id="S08" class="tableBorder1">
                            <tbody>
                                <tr>
                                    <td class="tbltd" colspan="2"><span class="simaName">S-8</span><br><input class="allo" id="S08-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S08-allx" type="button" value="全部を空に" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-08" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-07" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-06" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-05" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-04" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-03" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-02" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S08-01" type="button" value="空" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <table id="S09" class="tableBorder1">
                            <tbody>
                                <tr>
                                    <td class="tbltd" colspan="2"><span class="simaName">S-9</span><br><input class="allo" id="S09-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S09-allx" type="button" value="全部を空に" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-16" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-15" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-14" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-13" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-12" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-11" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-10" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-09" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-08" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-07" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-06" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-05" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-04" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-03" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-02" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S09-01" type="button" value="空" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <table id="S10" class="tableBorder1">
                            <tbody>
                                <tr>
                                    <td class="tbltd" colspan="2"><span class="simaName">S-10</span><br><input class="allo" id="S10-allo" type="button" value="全部埋める" /><br/><input class="allx" id="S10-allx" type="button" value="全部を空に" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-08" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-07" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-06" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-05" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-04" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-03" type="button" value="空" /></td>
                                </tr>
                                <tr>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-02" type="button" value="空" /></td>
                                    <td class="tbltd"><input class="zaseki color空" id="S10-01" type="button" value="空" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

リストから読んで画面に展開する

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function (){

    var itemId;
    var a;
    var b;
    var c;
    var d;
    var e;
    var f;
    var g;
    var h;
    var i;
    var j;
    var k;
    var l;
    var m;
    var n;
    var o;
    var p;

    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: 'listZasekiSample',
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                itemId= $(this).attr("ows_Title");
                a = $(this).attr("ows_za");
                b = $(this).attr("ows_zb");
                c = $(this).attr("ows_zc");
                d = $(this).attr("ows_zd");
                e = $(this).attr("ows_ze");
                f = $(this).attr("ows_zf");
                g = $(this).attr("ows_zg");
                h = $(this).attr("ows_zh");
                i = $(this).attr("ows_zi");
                j = $(this).attr("ows_zj");
                k = $(this).attr("ows_zk");
                l = $(this).attr("ows_zl");
                m = $(this).attr("ows_zm");
                n = $(this).attr("ows_zn");
                o= $(this).attr("ows_zo");
                p = $(this).attr("ows_zp");
                $("#01").text(a);
                $("#02").text(b);
                $("#03").text(c);
                $("#04").text(d);
                $("#05").text(e);
                $("#06").text(f);
                $("#07").text(g);
                $("#08").text(h);
                $("#09").text(i);
                $("#10").text(j);
                $("#11").text(k);
                $("#12").text(l);
                $("#13").text(m);
                $("#14").text(n);
                $("#15").text(o);
                $("#16").text(p);
                $("#iid").text(itemId);
                $("#"+itemId+"-01").val(a).addClass('color'+a);
                $("#"+itemId+"-02").val(b).addClass('color'+b);
                $("#"+itemId+"-03").val(c).addClass('color'+c);
                $("#"+itemId+"-04").val(d).addClass('color'+d);
                $("#"+itemId+"-05").val(e).addClass('color'+e);
                $("#"+itemId+"-06").val(f).addClass('color'+f);
                $("#"+itemId+"-07").val(g).addClass('color'+g);
                $("#"+itemId+"-08").val(h).addClass('color'+h);
                $("#"+itemId+"-09").val(i).addClass('color'+i);
                $("#"+itemId+"-10").val(j).addClass('color'+j);
                $("#"+itemId+"-11").val(k).addClass('color'+k);
                $("#"+itemId+"-12").val(l).addClass('color'+l);
                $("#"+itemId+"-13").val(m).addClass('color'+m);
                $("#"+itemId+"-14").val(n).addClass('color'+n);
                $("#"+itemId+"-15").val(o).addClass('color'+o);
                $("#"+itemId+"-16").val(p).addClass('color'+p);
            });
        }
    });


})();
</script>

ボタンをクリックしたときに動作する（ボタンの表示を変更して、リストに書き戻す）

    $(function() {
        countZaseki();
        var bushoCD = '部署01';
        var iid;
        var simaid;

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

        //全部埋める
        $('.allo').on('click', function() {
            simaid = $(this).attr('id').slice(0, 3);
            remColorClass(this);
            $('#' + simaid + ' .zaseki').val(bushoCD).removeClass('.allx').addClass('color' + bushoCD, '.allo');
            addColorClass(this);
        });

        //全部を空に
        $('.allx').on('click', function() {
            simaid = $(this).attr('id').slice(0, 3);
            remColorClass(this);
            $('#' + simaid + ' .zaseki').val('空').removeClass('.allo').addClass('color空', '.allx');
            addColorClass(this);
        });

        //座席個々をクリック
        $('.zaseki').on('click', function() {
            simaid = $(this).attr('id').slice(0, 3);
            remColorClass(this);
            if ($(this).val() == '空') {
                $(this).val(bushoCD);
            } else {
                $(this).val('空');
            }
            addColorClass(this);
        });

        $('.allo, .allx, .zaseki').on('click', function() {
            countZaseki();

            //当該の島を書き出し用テーブルに転記
            simaid = $(this).attr('id').slice(0, 3);
            $('#01').html($('#' + simaid + '-01').val());
            $('#02').html($('#' + simaid + '-02').val());
            $('#03').html($('#' + simaid + '-03').val());
            $('#04').html($('#' + simaid + '-04').val());
            $('#05').html($('#' + simaid + '-05').val());
            $('#06').html($('#' + simaid + '-06').val());
            $('#07').html($('#' + simaid + '-07').val());
            $('#08').html($('#' + simaid + '-08').val());
            $('#09').html($('#' + simaid + '-09').val());
            $('#10').html($('#' + simaid + '-10').val());
            $('#11').html($('#' + simaid + '-11').val());
            $('#12').html($('#' + simaid + '-12').val());
            $('#13').html($('#' + simaid + '-13').val());
            $('#14').html($('#' + simaid + '-14').val());
            $('#15').html($('#' + simaid + '-15').val());
            $('#16').html($('#' + simaid + '-16').val());
            $('#iid').html(simaid);

            //リストに書き戻すためのIDを取得する
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: 'listZasekiSample',
                completefunc: function(xData, Status) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function() {
                        if ($(this).attr("ows_Title") == simaid) {
                            iid = $(this).attr("ows_ID");
                        }
                    });
                }
            });

            //リストに書き戻す
            $().SPServices({
                operation: "UpdateListItems",
                async: false,
                batchCmd: "Update",
                listName: "listZasekiSample",
                valuepairs: [
                    ["za", $("#01").text()],
                    ["zb", $("#02").text()],
                    ["zc", $("#03").text()],
                    ["zd", $("#04").text()],
                    ["ze", $("#05").text()],
                    ["zf", $("#06").text()],
                    ["zg", $("#07").text()],
                    ["zh", $("#08").text()],
                    ["zi", $("#09").text()],
                    ["zj", $("#10").text()],
                    ["zk", $("#11").text()],
                    ["zl", $("#12").text()],
                    ["zm", $("#13").text()],
                    ["zn", $("#14").text()],
                    ["zo", $("#15").text()],
                    ["zp", $("#16").text()]
                ],
                ID: iid,
                completefunc: function(xData, Status) {
                    // alert("data saved");
                }
            });
        });

        //全部の島の座席数合計(全部と部署ごと)をカウント
        function countZaseki() {
            var numB01 = 0;
            var numB02 = 0;
            var numB03 = 0;
            var numB04 = 0;
            var numB05 = 0;
            var numB06 = 0;
            var numB07 = 0;

            $('.zaseki').each(function() {
                if ($(this).val() == '部署01') {
                    numB01++;
                } else if ($(this).val() == '部署02') {
                    numB02++;
                } else if ($(this).val() == '部署03') {
                    numB03++;
                } else if ($(this).val() == '部署04') {
                    numB04++;
                } else if ($(this).val() == '部署05') {
                    numB05++;
                } else if ($(this).val() == '部署06') {
                    numB06++;
                } else if ($(this).val() == '部署07') {
                    numB07++;
                }

            });

            //集計
            $('#numAll').html($('.zaseki').length);
            $('#numB01').html(numB01);
            $('#numB02').html(numB02);
            $('#numB03').html(numB03);
            $('#numB04').html(numB04);
            $('#numB05').html(numB05);
            $('#numB06').html(numB06);
            $('#numB07').html(numB07);
        }

        //部署別colorのclassを削除
        function remColorClass(obj) {
            simaid = $(obj).attr('id').slice(0, 3);
            var classVal;
            var classVals;
            for (var j = 1; j < 17; j++) {
                classVal = $('#' + simaid + '-' + ('00' + j).slice(-2)).attr('class') + '';
                classVals = classVal.split(' ');
                for (var i = 0; i < classVals.length; i++) {
                    if (classVals[i].indexOf('color') !== -1) {
                        $('#' + simaid + '-' + ('00' + j).slice(-2)).removeClass(classVals[i]);
                    }
                }
            }
        }

        //島の部署別colorのclassを付加
        function addColorClass(obj) {
            simaid = $(obj).attr('id').slice(0, 3);
            for (var i = 1; i < 17; i++) {
                $('#' + simaid + '-' + ('00' + i).slice(-2)).addClass('color' + $('#' + simaid + '-' + ('00' + i).slice(-2)).val());
            }
        }

    });

部署名じゃなくて個人名で表示したいとき

ここのページに、ユーザアカウントの名前とか部署名とかを取得する方法が載っています。
部署名を選択肢から取得するところをこれに置き換えたら、個人名も入れることができます。

おねがい

これけっこう重いのです。
ボタンを押して表示が変わるときのもったり感はんぱない。島とか部署がもっと増えると、もったりがやばいです。
会社のネットワークとか支給PCのスペックが云々ということは置いといて、この作りでどのあたりが重い原因なのか
ご教示いただけると、とても嬉しいです。