< Back

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

はじめに

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

内容・キーワード

  • 列番号を取得する
  • 親要素取得について
  • jQuery
  • 初心者向け、というか私がJS/jQueryの初心者

やりたかったこと

User ID Name Comment
2 Takahashi 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 Takahashi test
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 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 Name Comment
2 Takahashi test
4 Yamada test2

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

script.js
$("tbody .names").click(function(){
  var index = $(this).attr("id");
  console.log(index);
});

こんな感じでIDの値を取得できます！

おわりに

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

.