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

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

jQuery | テーブルに1行追加する

スポンサーリンク

おはようございます、浅井です。
ちょっと新しい記事の書き方を試しています。

目次

  1. 日記
  2. テーブルに行を追加するコード

日記

Googleに嫌われてから、アクセス数がガクンと落ちた話をしました。

アクセス数が落ちるのはまぁいいんだけど、なんで落ちたのかがわからないのが気持ち悪い。

なので、最近はSEOの本を買って色々と読んでいました。

なんか「SEOやってます」っていうと、なんとなくコンテンツ無視で、アクセスだけ稼ぎたい人みたいで、敬遠してたんだけど、結果として色々と勉強になりました。
最初から勉強しておけばよかった・・・!!

俺の場合、勉強する都度、頭の整理として文章にまとめて記事にしていました。
それがもしかしたらサイト内の重複コンテンツとして見られたのかもしれません。
あと、Google Web Master Toolで見ると、タイトルの重複が200件くらい検出されました。

まぁ、それは置いておいて、なんかSEOの本を見ると、

検索エンジンは箇条書きを好む

って大きく書いてあったんですよ。
なるほどーと思いながら他の方のブログを見ていると、冒頭に目次を書いている人がたまにいるんですよね。

これ、わかりやすいじゃん、と。
しかも、箇条書き!

検索エンジンにも気に入られるし、ページ内のコンテンツが一望できるし、冒頭に「目次」を置くのいいじゃんって思いました。

でもね、これの一つ問題なのは、面倒くさいことなんですよ。

いちいち

目次
<ol>
<li><a href="#append">append()の定義と使い方</a></li>
<li><a href="#after">after()の定義と使い方</a></li>
<li></li>
</ol>

<h3><a name="append"></a></h3>

<h3><a name="after"></a></h3>

みたいにHTML書かなきゃいけなくて、面倒くさくてヤル気がなくなってしまう。
なので、目次を作るペラページを作ろうかと考えました。

今のところ、さくらVPSを借りて、ドメインを取って、サーバを準備しつつ、ローカルで画面を作ってるような状態です。
仕事が忙しくなってきて、なかなか進められないのが悩みですが、作ってみます。

f:id:sho322:20140717081827j:plain

それで、今日は、「ボタンを押すと行を追加する」コードをjQueryを書くときに、ちょっと調べ物をしたので、メモがてら残しておきます。


テーブルに行を追加するコード

ググったらいくらでも出てくるんですが、StackOverFlowを参考にしました。
Add table row in jQuery

こんな画面があったとして。


f:id:sho322:20140717081932j:plain


ボタンを押した時に行を追加するためのコードはこんな感じですね。

$('#nameTable tbody > tr:last').after('<tr><td>山下</td><td>28</td></tr>')

全体で見ると、こんな感じ。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  var addRow;

  /** うまくいく例 */
  addRow = function () {
  	var lastRow = $('#nameTable tbody > tr:last').after('<tr><td>山下</td><td>28</td></tr>')
  	console.log(lastRow);
  }

  /** これでもうまくいく
  addRow = function() {
    $('#nameTable tr:last').after('<tr><td>山下</td><td>28</td></tr>');
  }
  */

  /**これでもできた
  addRow = function() {
  	$('#nameTable').append('<tr><td>山下</td><td>28</td></tr>');
  }
  */  

  $('#addRow').on('click', function() {
    addRow();
  });

});
</script>
</head>
<body>
<h2>テーブル</h2>

<button type="button" id="addRow">1行追加</button>
<table border="1" id="nameTable">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太一</td>
      <td>25</td>
    </tr>
    <tr>
      <td>石川正泰</td>
      <td>30</td>
    </tr>    
  </tbody>
</table>

</body>
</html>

ボタンを押すと行が追加されます。

f:id:sho322:20140717082026j:plain

実際にHTMLを見てみても、ちゃんと追加されています。

f:id:sho322:20140717082121j:plain

そいで、この単純なサンプルではappend()でも動いたんですが、上で作ってる目次ジェネレータでは、append()とやってもtdが追加されるだけで、横にどんどん箱が増えていって、
行が追加されなかったんですよ。

そんなとこでハマってちょっと時間がかかったんですが、なんでappend()だとうまくいかなかったのか、なんでafter()だとうまくいったのか、まだ腹落ちしていないので、
いまちょっと、jQueryのappend()とafter()の違いについてもまとめています。

まとめたら別途記事にしようかと思っています。


jQueryクックブック

jQueryクックブック