質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

3回答

251閲覧

tableの行をカラフルにする方法を教えてください。(javascriptのみで)

HearthXml

総合スコア51

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/10/24 10:53

編集2018/10/25 09:00

@foreach($events as $event)~@endforeachの間にあるtrタグで囲まれた内容はサーバーサイドの動作によって数が変わります。
あらかじめHTMLに記述することができません。
各々のtrタグにbootstrapの色を変えるクラスを付与したいですが、
LaravelのBladeの機能ではなく、javascript,jqueryのみで実装する方法を教えてください。お願いします。
理由としましては、javascript,jqueryが苦手であることを克服するためです。

html

1<table class="table table-hover"> 2 <thead> 3 <tr> 4 <th scope="col">A</th> 5 <th scope="col">B</th> 6 <th scope="col">C</th> 7 <th scope="col">D</th> 8 </tr> 9 </thead> 10 <tbody> 11 @foreach($events as $event) 12 <tr style="cursor: pointer" class="table-active clickable-row" data-href="/event/eventinfo?id={{$event->event_id}}"> 13 <th scope="row">{{$event->event_name}}</th> 14 <td>{{$event->capacity}}</td> 15 <td>{{$event->accept_end}}</td> 16 <td>{{$event->open_day}}</td> 17 </tr> 18 @endforeach 19 </tbody> 20</table>

こちらが付与したいbootstrapのクラスです。

table-active table-secondary table-light table-primary

回答でできたこと

html

1<table class="table table-hover" id="event-list"> 2 <thead> 3 <tr> 4 <th scope="col">A</th> 5 <th scope="col">B</th> 6 <th scope="col">C</th> 7 <th scope="col">D</th> 8 </tr> 9 </thead> 10 <tbody> 11 @foreach($events as $event) 12 <tr style="cursor: pointer" class="table-active clickable-row" data-href="/event/eventinfo?id={{$event->event_id}}"> 13 <th scope="row">{{$event->event_name}}</th> 14 <td>{{$event->capacity}}</td> 15 <td>{{$event->accept_end}}</td> 16 <td>{{$event->open_day}}</td> 17 </tr> 18 @endforeach 19 </tbody> 20</table>

javascript

1var colors = ['table-active', 'table-secondary', 'table-light','table-primary']; 2var targets = $("#event-list tr"); 3$.each(targets, function (i,value) { 4$("tr").addClass(colors[i % 4]) 5});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dice142

2018/10/24 10:54

質問文、途中で切れてませんか?
HearthXml

2018/10/24 10:57

修正しました。ご指摘ありがとうございました。
m.ts10806

2018/10/24 21:26 編集

Bladeの機能、というかPHP的に分岐かければJavaScriptで後付けで変更かけなくてもできるように思いますが、なぜJavaScriptで対応しようとされているのでしょうか?Blade自体、サーバーサイドの機能ですし。(細かいですがjQueryはJavaScriptライブラリなので、枠としてはJavaScript>=jQueryです。内部的にはJavaScriptですので)
HearthXml

2018/10/25 00:23

javascriptを克服したくて解決方法を限定的にさせていただきました。
m.ts10806

2018/10/25 00:34

そのあたりの背景や経緯は本文に追記していただけると、要件に沿った回答がつきます。様々な手段が考えられる場合、捉え方が様々な内容だと本来ほしい回答が得られにくく、また折角の回答が無駄足になってしまいます
HearthXml

2018/10/25 09:01

申し訳ありませんでした。質問内容を変更しました。
guest

回答3

0

ベストアンサー

一番簡単なのはtable-stripedをつけることですが、2色ではだめなのでしょうか?

HTML

1<table class="table table-hover table-striped">

JavaScript

1//$("tr").addClass(colors[i % 4]) 2$(value).addClass(colors[i % 4]);

修正点はこうですが、table-activeはhover時と同じ色になってしまうので、別のものにしたほうがいいのでは?

投稿2018/10/25 03:08

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HearthXml

2018/10/26 09:25

table-stripedは知りませんでした。 無事動かすことができました。 ありがとうございます
guest

0

1行ごとに4種色を変えたい?
CSSではだめなんでしょうか?

CSS

1<style> 2#t1 tbody tr:nth-child(4n+1){background-Color:yellow;} 3#t1 tbody tr:nth-child(4n+2){background-Color:lime;} 4#t1 tbody tr:nth-child(4n+3){background-Color:aqua;} 5#t1 tbody tr:nth-child(4n){background-Color:blue;} 6</style> 7<table id="t1"> 8<thead> 9<tr><th>col1</th><th>col2</th><th>col3</th></tr> 10</thead> 11<tbody> 12<tr><td>val1-1</td><td>val2-1</td><td>val3-1</td></tr> 13<tr><td>val1-2</td><td>val2-2</td><td>val3-2</td></tr> 14<tr><td>val1-3</td><td>val2-3</td><td>val3-3</td></tr> 15<tr><td>val1-4</td><td>val2-4</td><td>val3-4</td></tr> 16<tr><td>val1-5</td><td>val2-5</td><td>val3-5</td></tr> 17<tr><td>val1-6</td><td>val2-6</td><td>val3-6</td></tr> 18<tr><td>val1-7</td><td>val2-7</td><td>val3-7</td></tr> 19<tr><td>val1-8</td><td>val2-8</td><td>val3-8</td></tr> 20<tr><td>val1-9</td><td>val2-9</td><td>val3-9</td></tr> 21</tbody> 22

投稿2018/10/25 00:28

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

JavaScriptのみということですと、以下の手順になるかと思います。

  1. 該当のtableの要素を取得
  2. 取得したtable要素の配下にあるtrを取得
  3. tr要素の数だけループし、各tr要素にクラス名を追加

まずは調べつつやってみてください。

投稿2018/10/24 11:16

dice142

総合スコア5158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HearthXml

2018/10/24 11:57

ごめんなさいjavascriptだけと書きましたが、jqueryも使います。 一応、 該当のtableの要素を取得 取得したtable要素の配下にあるtrを取得 するまでできましたが、クラスを追加する方法がわからないです。
dice142

2018/10/24 13:16

JavaScriptでもJQueryでも手順は同じなので問題ないですね。 「JQuery クラス 追加」とかで出てきませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問