jQueryでの列番号取得に関して

# はじめに
昨日[170216]の業務ではまった点をまとめます。試行錯誤しながら長めになるので気長にみてください。クリックした行番号をjQuery取得したいだけのQiitaです！

## 内容・キーワード
+ 列番号を取得する
+ 親要素取得について
+ jQuery
+ 初心者向け、というか私がJS/jQueryの初心者

## やりたかったこと

| User ID | Name | Comment |
|:-:|:-:|:-:|
| 2  |  Takahashi <i class="fa fa-hand-o-left" aria-hidden="true"></i>  |  test |
| 4  | Yamada  |test2   |
| 5  | Sato  |  test3 |

こちらのTableの[Takahashi]をクリックして、jQueryで列番号[0]を取得して

```test.php
Array
(
    [0] => Array
        (
            ['趣味'] => "読書"
            ["特技"] => "ruby"
            ["名前"] => "Takahashi"
        )
    [1] => Array
        (
            (略)
        )
)
```
この`test.php`のArray[0]を取得して、次のテーブルを作りたいと

|  | Takahashi |
|:-:|:-:|
| 趣味  | 読書  |
| 特技  |  ruby |

そんなことがしたかったです！

# 解法1 列全体をクリック可能にする

| User ID | Name | Comment |
|:-:|:-:|:-:|
| 2 <i class="fa fa-hand-o-left" aria-hidden="true"></i>  |  Takahashi <i class="fa fa-hand-o-left" aria-hidden="true"></i>  |  test <i class="fa fa-hand-o-left" aria-hidden="true"></i> |
| 4   |  Yamada   |  test2  |
列番号0と表示してくれるかな?

```table.html

/* ただのテーブル */
<table>
  <thead>
    <tr>
      <th>User ID</th><th>Name</th><th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td class="names">Takahashi</td>
      <td>test</td>
    </tr>
    <tr>
      <td>4</td>
      <td class="names">Yamada</td>
      <td>test2</td>
    </tr>
  </tbody>
</table>

/* ここからjQuery */

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
(function() {

$("tbody tr").click(function(){
  console.log($("tbody tr").index(this));
});

})();
</script>
```
次の部分を簡単に解説すると

```script.js
$("tbody tr").index(this);
```
`this`には今回クリックした列がすべて入っています。console.logするとこんな感じ。`<tr><td>2</td><td class="names">Takahashi</td><td>test</td></tr>`
`$("tbody tr")`は　`tbody`直下の`tr`です。
`index()`が`this`がいる列のインデックス番号を返してくれます。
これで無事取得できました〜〜。
一番情報ページが多くて簡単でした！

# 解法2 Nameだけクリック可能にする

Nameにはクラスnamesをつけています。

| User ID | Name | Comment |
|:-:|:-:|:-:|
| 2   |  Takahashi   |  test  |
| 4   |  Yamada <i class="fa fa-hand-o-left" aria-hidden="true"></i>  |  test2  |
ここ押すと列番号1を取得したい。


```script.js
$("tbody .names").click(function(){
  console.log(this); // <td class="names">Takahashi</td>
  var tr = $(this).parent(); // [td]の親の[tr]を取得
  var index = $("tbody tr").index(tr); // このtrは何番目?
  console.log(index);
});
```

table構成は変えてないのでjQueryの部分だけです。
`this`じゃなくて`$(this)`ですよ〜。ここめっちゃハマりました。
~~詳しい解説は先輩方がコメント欄でしてくれると信じているので~~
とりあえずconsole.logしてみると

```script.js
console.log(this); // <td class="names">Takahashi</td>
console.log(this.parent()); // エラー
// Uncaught TypeError: parent is not a function at HTMLTableCellElement
console.log($(this)); // [td.names, context: td.names]
console.log($(this).parent()); // 0

```
thisのparent()はタイプエラーでて、$(this)でそれっぽいオブジェクトにしてからparent()使えってことでしょうか。

# 解法3 ソート付いても大丈夫！！！

痛恨のミスをしていました。
ソートを可能にしていたことをすっかり忘れていました。はい。

```test.php
Array
(
    [0] => Array
        (
            ['趣味'] => "読書"
            ["特技"] => "ruby"
            ["名前"] => "Takahashi"
        )
    [1] => Array
        (
            (略)
        )
)
```
ソートした後は、行のindexとarrayのindexが対応してなかったです！！
別人のデータ取ってきてました。


```test.php
/* phpのforeachの途中 */
<?php isset($index) ? $index += 1 : $index = 0; ?>
<td class="names" id="<?php echo $index; ?>">Takahashi</td>
```
こんな感じのphpでid生成して対応しました。
Tableはこんな感じ。

```index.html
<table>
  <thead>
    <tr>
      <th>User ID</th><th>Name</th><th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td class="names" id="0">Takahashi</td>
      <td>test</td>
    </tr>
    <tr>
      <td>4</td>
      <td class="names" id="1">Yamada</td>
      <td>test2</td>
    </tr>
  </tbody>
</table>
```

| User ID <i class="fa fa-sort" aria-hidden="true"></i>| Name <i class="fa fa-sort" aria-hidden="true"></i>| Comment <i class="fa fa-sort" aria-hidden="true"></i>|
|:-:|:-:|:-:|
| 2   |  Takahashi <i class="fa fa-hand-o-left" aria-hidden="true"></i>  |  test  |
| 4   |  Yamada   |  test2  |

なので今回はクラスnamesをクリックしたら、そのtdのidを列番号の代わりに取得するということにた。

```script.js
$("tbody .names").click(function(){
  var index = $(this).attr("id");
  console.log(index);
});
```
こんな感じでIDの値を取得できます！

# おわりに
jQueryエラーとかなり向き合い、苦戦しました。
はじめての記事なので何かあったらコメントください！
長文読んでいただきありがとうございました！

.