Jqueryでテーブルの中の文字列を取得したい。

Question

<table  class="table">
  <tbody>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目3</th>
      <th>項目4</th>
      <th>項目5</th>
      <th>項目6</th>
      <th>項目7</th>
      <th>項目8</th>
      <th>項目9</th>
    </tr>
    <tr>
      <td><span>13</span></td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
      <td>C5</td>
      <td>C6</td>
      <td><input type="button" value="B1" onclick="location.href='/hoge/13'" /></td>
      <td><input type="button" value="B2" onclick="location.href='/foo/13'" /></td>
      <td><input type="button" value="Pv" class="Pv" /></td>
    </tr>
    <tr>
      <td><span>12</span></td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
      <td>C5</td>
      <td>C6</td>
      <td><input type="button" value="B1" onclick="location.href='/hoge/12'" /></td>
      <td><input type="button" value="B2" onclick="location.href='/foo/12'" /></td>
      <td><input type="button" value="Pv" class="Pv" /></td>
    </tr>
    <tr>
      <td><span>11</span></td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
      <td>C5</td>
      <td>C6</td>
      <td><input type="button" value="B1" onclick="location.href='/hoge/11'" /></td>
      <td><input type="button" value="B2" onclick="location.href='/foo/11'" /></td>
      <td><input type="button" value="Pv" class="Pv" /></td>
    </tr>
  </tbody>
</table>

というテーブルで各行のPvのClass が付与されたボタンを押すとindex番号を取得して、その行の先頭の番号を取得しようとしています。

	$('.Pv').click(function(){
		var index	=	$(".Pv").index(this);
alert("index=" + index);
		var text	=	$("span:eq(" + index + ")").text();
alert("text=" + text);
	});

上手くいきません。

どこが悪いでしょうか？？？？
ご指摘頂けば幸いです。

Comments

[m.ts10806]

「PvのClass が付与されたボタン」とありますが、どのボタンにもclassは付与されていないようですが

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[hidepon]

間違えました。スミマセン修正します。

[m.ts10806]

転記ミスでしょうか？と思ったのですが、付与すれば（または.previewとかに変えれば）想定通りに動きますね。やってみてください。

[hidepon]

転記ミスですか？うーーーん・・・。動かなかったんですよね・・・。ちょっとやってみます。

[m.ts10806]

あ、いえ、最初のコメントに続けて書いているうちに他のコメントが入ってしまったのでわかれてしまってます。すみません。ただ、正しく付与すれば動作しますよ。

Answer 1

$(function(){
    $("table input.preview").on('click', function() {
        var num = $(this).parents('tr').find('td:first span').text();
        alert(num);
    });
});

Answer 2

各行のPvのClass が付与されたボタン

.Pvというクラスのボタンがありません。
セレクタが間違っています。正しくは$('.preview')では？
もしくは.Pvクラスを与えてください。

Answer 3

Pvというclassがついたボタンは一つもありません
previewクラスの付いたPvというvalueのボタンを拾うとかでしょうか？

sample

ちなみにtrでグルーピングされるのでインデックスは取らなくてよいのでは？
追記：命題が.preview→.Prとなったため以下修正します

$(function(){
  $('.Pr').on('click',function(){
    console.log($(this).closest('tr').find('td:first span').html()); 
  });
});

Comments

[hidepon]

質問事項を修正しました。最後のボタンにPvのクラスを設定しています。申し訳ないです・・・

[yambejp]

修正された命題にあわせて回答を修正しておきました

[hidepon]

こういう記述が出来るんですね・・・。どうもindexを取得するということが頭に染みついていて、この方法でなんとかしたいな・・・という考えになっちゃいます。有難うございます。

[hidepon]

すごすぎ・・・とても勉強になります。有難うございます。