感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery | テーブル内のinput boxに入った値を順番に取得する

スポンサーリンク

目次

日記

ちょっとずつ目次ジェネレータを作っていますが、そろそろサーバにアップできそうです。
今日のブログの目次もジェネレータを使って作ってみました。

明日さくらVPSのscpの設定やらApacheを色々いじくる時間があれば、すぐにupします。

自分で作っておいてあれですが、けっこう便利ですね。

こんな感じで作って、目次のHTMLが出力されます。
f:id:sho322:20140718012304j:plain

今日は色々と調べてみたので、それをまとめます。

table内にあるテキストボックス内の値を取得する

上の画像にもありますが、テーブルの中に、input type="text"を入れていて、その値を取得します。

HTMLはこんな感じですね。省略してますが・・・。

<table class="table table-bordered col-md-6" id="mokujiTable">
  <thead>
    <tr>
      <th class="col-md-3">目次項目</th>
      <th class="col-md-3">項目属性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tdclass"><input type="text" class="form-control intable komoku" placeholder="目次の項目を入れてください"></td>
      <td class="tdclass"><input type="text" class="form-control intable tag" placeholder="タグに設定する名前を入れてください"></td>
    </tr>
    省略

このinput type="text"というテキストボックスに入れた値をテーブルの上から順に走査して、値を取得しています。
それは以下のように書きました。

$("#mokujiTable tbody > tr").each(function() {
  var komoku = $(this).find('input.komoku').val();
  var tag = $(this).find('input.tag').val();

  if (komoku != null && tag != null) {
    if (komoku && tag ) {
      html += '<li><a href="#' + tag + '">' + komoku + '</a></li>' + "\n";
      heading += '<' + headingTag + '>' + '<a name=' + tag + '>' + komoku + '</a></' + headingTag + '>' + "\n\n";
    }

  }
}

ちょっと長くなっていますが、ポイントの部分はテーブルのidを指定して、

$("#mokujiTable tbody > tr").each(function() 

としているところ。

ここで、tableのtbody内にあるtr要素を順番に見ていくようにできました。
あとは、each()で渡した要素の中で、inputの属性にclass="komoku"を設定しているものを見つけて、

var komoku = $(this).find('input.komoku').val();

とやれば、テキストボックスに書いた値を取得することができます。

ラジオボタンでチェックされたものを取得する

ラジオボタンで、チェックが入っているものを取得したいと思います。

HTMLはこんな感じで、Bootstrap入ってるから見づらいですが、name="list"と設定しています。

<label class="radio-inline">
    <input type="radio" name="list" value="ul" checked> ul
</label>
<label class="radio-inline">
    <input type="radio" name="list" value="ol"> ol
</label>

これでチェックされたものを取得するのは

listTag = $('input[name="list"]:checked').val();

とすればいいです。

セレクトボックスでチェックが入ったものの値を取得する

select boxに入った値で、選択されているもののvalueを取得します。

見出しに使うタグを選んでください:
<select class="input-medium" id="tags">
    <option value="h2">h2</option>
    <option value="h3" selected>h3</option>
    <option value="h4">h4</option>
    <option value="h5">h5</option>
    <option value="h6">h6</option>
</select>

この値を取得するjQueryは以下です。

headingTag = $('#tags option:selected').text();


Amazon Web Services 基礎からのネットワーク&サーバー構築

Amazon Web Services 基礎からのネットワーク&サーバー構築

この本を今日amazonで買いました!
明日届くかな?