読者です 読者をやめる 読者になる 読者になる

HTMLにおける表要素のグルーピングと条件分岐を用いた制御

2016 Tips HTML JavaScript programming プログラミング

長らく,FXの定期更新のみになっていましたが,久々に違うテーマで記事を書きます.3つ目のテーマはちょっと広く,「プログラミング,ソフトウェア」です.
まぁ「プログラミング,ソフトウェア」は研究のツールとして欠かせないわけですね.
さて,前回のブログで表をHTMLで作成したのですが,HTML初心者にはなかなか難しかったので,記事としてまとめておこうと思いました.

エクセルではある値以上なら赤で,ある値未満なら青みたいな表要素の制御がGUI上で簡単に行なえます.
格好良くないとはいえ,やはりエクセルが便利なことは否定できません.
それをHTMLで行うとどうなるか,下に実際のあまりきれいではないソースコードも載せてあるので,参考にしていただければと思います.

表の要素のグルーピング

<thead>, <tbody>(複数可), <tfoot>で行方向のグルーピングを,<colgroup>で列方向のグルーピングを行います.
行の一部,列の一部をグルーピングする方法はわかりませんでした.(できるのなら教えて欲しい)

表の要素の制御

JavaScriptを使います.

<script type="text/javascript">

で導入することができます.
table生成時に,idを付けておき,

<table id="sample_table">
  ,,,
</table>

それを指定することで呼び出します.

val table = document.getElementById('sample_table')

表の各要素の参照は

  for (var i=1; i<table1.rows.length; i++) {
    for (var j=1; j<table1.rows[i].cells.length; j++){
      var data = table1.rows[i].cells[j].firstChild.data
    }
  }

により可能です.
このfor文の中にif文を入れることで,各表要素に対して,
0より大きければ文字色を赤に,0より小さければ文字色を青に,などといった制御が可能になります.

おわりに

 数字さえ書き換えれば,今後も使えるものにはなりましたが,
なかなか使い勝手が悪そうなので,CSVからこのHTML+JSのソースコードを生成するようなものを作成するつもりです.

参考1:前回のブログの表のソース

<table id="table1" style="table-layout: fixed; width: 100%; border: solid 3px #000000;">
  <colgroup style="border: solid 2px #000000;"></colgroup>
  <colgroup> <col span="4" /> </colgroup>
  <colgroup style="border: solid 2px #000000;"></colgroup>
  <thead style="border: solid 2px #000000;">
    <tr><th> </th><th>ドル</th><th>ポンド</th><th>豪ドル</th><th>NZドル</th><th>全体収支</th></tr>
  </thead>
  <tbody style="text-align: right;">
    <tr><th style="text-align: center;">先週まで</th>
      <td>5782</td><td>2119</td><td>5688</td><td>3352</td><td>16941</td></tr>
    <tr><th style="text-align: center;"></th>
      <td>172</td><td>3454</td><td>1376</td><td>-138</td><td>4864</td></tr>
    <tr><th style="text-align: center;"></th>
      <td>1344</td><td>834</td><td>1319</td><td>761</td><td>4258</td></tr>
    <tr><th style="text-align: center;"></th>
      <td>608</td><td>1459</td><td>1135</td><td>545</td><td>3747</td></tr>
    <tr><th style="text-align: center;"></th>
      <td>-18</td><td>1288</td><td>37</td><td>0</td><td>1307</td></tr>
    <tr><th style="text-align: center;"></th>
      <td>326</td><td>386</td><td>-138</td><td>286</td><td>860</td></tr>
  </tbody>
  <tfoot style="text-align: right; border: solid 2px #000000;">
    <tr><th style="text-align: center;">週合計</th>
      <td>2342</td><td>7421</td><td>3729</td><td>1454</td><td>15036</td></tr>
    <tr><th style="text-align: center;">累計</th>
      <td>8214</td><td>9540</td><td>9417</td><td>4806</td><td>31977</td></tr>
  </tfoot>
</table>

<script type="text/javascript">
  var table1 = document.getElementById('table1');
  for (var i=1; i<table1.rows.length; i++) {
    for (var j=1; j<table1.rows[i].cells.length; j++){
      var cell_ij = table1.rows[i].cells[j]
      if(cell_ij.firstChild.data>0){
        cell_ij.style.color='red';
      }
      if(cell_ij.firstChild.data<0){
        cell_ij.style.color='blue';
      }
    }
  }
</script>

参考2:はてな記法におけるソースコードの表し方.

 >|java|
    #↑ここで言語指定
    #この中にソースコード
 ||<

言語を| |で指定することで本ブログのようにソースコードに色をつけて表示できます.
(見た目をよりきれいにするためにはgistの方が良いです.)

参考3:はてな記法の本文中におけるHTMLの括弧の表記方法

  &lt内容&gt

この出力が<内容>