テーブルの形式を整えるJavascript

このQ&Aのポイント
  • テーブルの形式を整えるためにJavascriptを使用する方法について説明します。
  • デモページにある項目の色やチェックボックスを変更するために、Javascriptのコードを改良する方法を教えてください。
  • index.htmlのコード、Javascriptのコード、CSSのコードについて、各ファイルの役割と具体的な修正箇所について説明してください。
回答を見る
  • ベストアンサー

テーブルの形式を整えるJavascript

以下のコードを改良してサンプルのページにある項目の色を変えるのとチェックボックスの項目を消したいと考えているのですがjavascriptがわからないためどこを消して良いか全くわからない状態です。 (チェックボックスに関してはindex.htmlのチェックボックスを消すだけではなくjavascriptのなかでチェックボックスを生成する部分に関しても教えていただければ助かります。) もしどなたかお分かりになる方いらっしゃいましたらご教示いただければ幸いです。 よろしくお願いいたします。 ※コードはすべて合わせると質問ページに入りきらないので別のページに記載しております デモページ http://www.matts411.com/static/demos/grid/index.html index.htmlのコード: http://notepad.cc/share/Ohy1B34ajT Javascriptのコード: http://notepad.cc/share/dRK0L8AoF6 CSSのコード: http://notepad.cc/share/rOYYv6I4bL

質問者が選んだベストアンサー

  • ベストアンサー
  • piraippi
  • ベストアンサー率27% (47/168)
回答No.1

「項目の色」とはどれのことでしょうか? 「Team」とかの背景色でしょうか? チェックボックスですが、htmlには直接記述していなく、 jsで生成してるようです。 非表示にしたいばあは、grid.jsの294, 295, 296行目をコメントあるとしてください。 こんな感じです。 (Javascriptでは // (スラッシュを2つ)つけるとコメントアウトされます。 //html = "<LABEL class=g_SH><INPUT tabIndex='-1' type="; //html += ((this.options.allowMultipleSelections) //html += ">&nbsp;</LABEL>";

tokutoku0108
質問者

お礼

ご回答ありがとうございます! >//html = "<LABEL class=g_SH><INPUT tabIndex='-1' type="; //html += ((this.options.allowMultipleSelections) //html += ">&nbsp;</LABEL>"; なるほど、よく見てみると明らかにチェックボックスを生成してそうなコードですね!! 今はコードをいじれる状態にないのですがいじれるようになったら確認してみます!! >「項目の色」とはどれのことでしょうか? 「Team」とかの背景色でしょうか? おっしゃるとおり「Team」や「W」などの一行目の背景色です!! できれば「W~Tまでは赤色、Pct~Net Ptsまでは青色」など項目によって 色を変えられればと思っているのですがこれだけ複雑なコードですとやはりそういったアレンジを加えるのは難しいのでしょうか。。。

その他の回答 (1)

  • piraippi
  • ベストアンサー率27% (47/168)
回答No.2

そしたらですね、Grid.cssの(g_HRクラス)121行目の 「background-color : #eee;」をコメントアウトしてください。 -------------------------------------------------- 修正前 background-color : #eee; --------------------------------------------------  修正後 /* background-color : #eee; */ -------------------------------------------------- で、g_HRクラスの次に以下のクラスを指定してください。 -------------------------------------------------- .g_Head div:nth-child(3) { background-color: red; } .g_Head div:nth-child(4) { background-color: pink; } -------------------------------------------------- これで、「W」が赤に、「L」がピンクになると思います。 あとは、同様に「.g_Head div:nth-child(4)」の数字(x)<-この括弧の中の数字を指定して 「background-color: pink;」とかを指定してあげればどうでしょうか?

tokutoku0108
質問者

お礼

お返事が遅くなってしまい申し訳ございません! ご回答ありがとうございます!また前回教えていただいたコードを非表示にしたことでチェックボックスを消すことができました!! 前回同様操作できる環境にはないのですが操作できる環境早速確認してみます!!

関連するQ&A

  • hteml5を使ったページめくりの質問です。

    http://www.html5rocks.com/static/demos/20things_pageflip/example/index.html でページめくりを下から上にするにはどうしたらいいのでしょう。 あと、各ページがindex.html内で<section></section>で表示されているようなのですが 各ページを別のhtml(例えば、index1.html、index2.html)にするにはどう記述したらいいのでしょうか。 素人なんで教えてください。

  • phpとjavascript ・・・・ について

    授業評価アンケートのデータ収集システムの開発を行っています。 科目及び科目コードを入力させるページ(page1.php)があります。 その入力について、入力ミスをなくすために、「参照」ページ(kamoku.html)をつくり、 そこには予め「科目/科目コード」という項目のある表が用意されており、 そのページ(kamoku.html)へジャンプし、そこで入力したい項目をクリックすると、 page1.phpの科目及び科目コード、各々のテキストボックスに入力したいものを代入することに成功しました。 このような構造にする前は、 手入力した後、 「次ページへ」 をクリックすると、次ページへジャンプするようになっていました。 <FORM method="post" action="page2.php" enctype="application/x-www-form-urlencoded"> javascript を利用したのですが、 これが原因なのでしょうか? javascriptを利用したページの拡張子は必ずhtmlじゃないといけないのでしょうか? (page1.phpをただ単にpage1.htmlにしてもダメでしたが・・・) URLについて、 http://----/page1.php 次ページをクリックすると http://----/page1.php?nendo=6&gakunen=1&class=1&kamokumei=&kamokucode=&kind=1&people=&sub=次ページへ のようになり、昔のように次ページをジャンプせず、入力項目が空になったりします。 どなたか解決法を教えてください!!! お願いします><

    • ベストアンサー
    • PHP
  • JavaScriptでの空白チェックの方法

    ユーザー登録ページで、項目に空白が入っているかを調べたいと 思っています。 (入力する項目)  ・ユーザID ・パスワード ・名前(カナ)  ・性別(←ラジオボタンで選択する)  ・生年月日(←西暦のみ入力し、月日は選択メニューより選ぶ) このうち、性別と月日は未入力になることはないのですが、 他の項目に関しては、テキストボックスなので、以下のチェックを つけました。 <SCRIPT language="JavaScript"> <!-- function formCheck() { if (document.tourokuForm.userId.value == "" ||    document.tourokuForm.passWord.value == "" ||    document.tourokuForm.name.value == "" ||    document.tourokuForm.year.value == "" )  {    alert("すべての項目を入力してください。");    return false;  } } //--> </SCRIPT> という風なチェックを行っています。 項目の未入力チェックはうまくいくのですが、値ではなく、 「半角空白」、又は「全角空白」のみ入れたときにチェックされず、 空白のまま次のページへとんでしまいます。 コードを使って判断させようと思いましたが、リファレンスの通り に書いてもうまくいきませんでした。 もし知っておられる方がいましたら、ぜひ教えてください!

  • HTMLとJavaScriptのコードについて

    □ 利用規約に同意する ご予約フォーム 上記「利用規約に同意する」のチェックボックスにチェックを入れるとその下にある「ご予約フォーム」ボタンが無効化から有効化に切り替わり、それをクリックすると別サイトのご予約フォームのページにジャンプできるコンテンツを作成したいのですが、HTMLとJavaScriptのコードをご教授頂ければと思います。よろしくお願い致します。

  • Javascriptでフォーム項目を変化させたい

    タイトル通りなのですが、Javascriptを利用して『入力するフォーム項目を変化させたい』と考えています。 参考になるページを探そうと思い検索しても、javascriptを勉強しはじめて間もない私が読めるようなページにHITしなくて(検索のワード選定が出来てないかもしれませんが…)困っています。 今回したいことは、 A・B・Cというラジオボタン(チェックボックス)があり、 <input type="radio" name="select" value="patarn_a">A <input type="radio" name="select" value="patarn_b">B <input type="radio" name="select" value="patarn_c">C Aにチェックを入れるとAに対応する入力項目(例えば項目1・項目2・項目3)が記入できるようになり、Bにチェックを入れると、Bに対応する入力項目(例えば項目1・項目3・項目4)が記入できるようになり、Cにチェックを入れると、Cに対応する入力項目(例えば項目2・項目5・項目6)が記入できるようにしたい、のです。 で、送信ボタンを押した時にA・B・Cのどこにチェックが入っているのか、それからその対応項目に入力された値をデータとして送りたいのですが、どうにも方法が分かりません。 もし、お手すきの方がいらっしゃいましたら、どなたかご教授頂けないでしょうか?

  • [Javascript]画面上にあるチェックボックスの数!

    こんばんは。 ASPで自動生成(動的ページ)されるページにて、 表示されているチェックボックスの数をJavaScriptで調べることはできませんか? したいことは、ボタンを2つ置いておき、1つはクリックで全部チェックON,もうひとつはOFFということをしたいのです。 宜しくお願いいたします。

  • Javascriptで起動するときの音の消失

    いつも、このページにはお世話になっています。 FLASHファイルで、別のFLASHファイルをJavascriptで呼び出すときに、音が鳴りません。 ファイル構成は以下のようになってます。 index.html file1.swf index2.html file2.swf 要するにindex.htmlにある、file1.swfから index2.htmlを呼びます。起動は出来ます。しかし、 index2.htmlにあるfile2.swfの音が途中で 切れてしまいます。 index.htmlの呼び出し側をAタグなどをして Javascriptを呼んだ場合は音が鳴ります。 これは何故なんでしょうか? すいません。困っていますよろしくお願いします。 コード↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ [file1.swf] _root.getURL("JavaScript:void(subOpenWin())"); [index.html] <script language='JavaScript'> <!-- function subOpenWin(){ var reSub = subOpen('index2.html','newOpen',0,0,0,0,1,0,1024,680,0,0); return reSub; } //--> </script>

    • ベストアンサー
    • Flash
  • 外部JavaScriptがうまく呼び出せません

    お世話になっております。 お分かりになります方いらっしゃいましたら、 ご教授願えますでしょうか? 人材を募集する応募フォームを作っています。 応募フォームの項目にはいくつか必須項目があり、 送信ボタンを押した際、必須チェックをJavaScriptで 行いたいと思っています。 チェックする項目が多数あるので、直接htmlファイルには書き込まず、 外部jsに書き出して、htmlファイル上で呼び出す方法をとる事にしました。 htmlに直接書き込んだ際にはうまく動いたので、 JavaScriptの内容が悪いのではないと思うのですが、 送信ボタンを押しても、必須項目がチェックされず、 そのまま項目が空のメールが届いてしまいます。 以下に該当のコードを記入いたしますので、 原因がお分かりになります方、ご教授頂いてもよろしいでしょうか? ・外部js:oncheck.js ・cgi:send.cgi 【oncheck.js】 <!-- function check(){ ・ (必須項目のチェックを行っています) ・ } //--> 【htmlファイル】 <html> <head> <title>採用情報</title> <script language=JavaScript src="oncheck.js" type=text/javascript> </script> </head> <body> <h3>応募フォーム</h3> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> ・ ・ ・ <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> </form> </body> </html> 呼び出し方に問題があるのでしょうか? 宜しくお願い致します。

  • JavaScriptにて、2つのチェックボックスのチェックができません

    お世話になっております。 お分かりになる方いらっしゃいましたら、ご教授願えますでしょうか? 現在採用に関する応募フォームを作成しています。 JavaScriptにてフォーム内のチェックボックスに チェックが入っているか、必須チェックをさせたいと思っています。 テキストボックスやコンボボックスなど、いくつか必須チェックがある中で、 チェックボックスの項目についての必須チェックがうまくいきません。 チェック完了後、cgiにてメールを送信するようにしているのですが、 チェックがされず、メールを送信してしまいます。 ローカルで行ってみたのですが、チェックをスルーして、 cgiに遷移してしまいます。 フォームイメージは以下の感じです。 <応募フォーム> --------------------------- 希望勤務地:□本社 □大阪 --------------------------- 2つのチェックボックスどちらにもチェックが入っていない場合は、 エラーメッセージを出し、処理を中止します。 どちらのチェックボックスにもチェックが入っていても、 エラーは出さずにcgiへ遷移します。 以下は現在のコードの内容です。 <HTMLコード> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> <input type="checkbox" name="希望勤務地" value="本社" checked>本社 <input type="checkbox" name="希望勤務地" value="大阪">大阪 <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> <Scriptコード> function check(){ if(!document.応募フォーム.希望勤務地.value.checked){ flag = 1; window.alert('必須項目[希望勤務地]にチェックがされていません'); } } 色々試してみたのですが、うまくいきませんでした。 チェックボックスのnameを同じ名前にしているのが原因でしょうか? お手数ですが、宜しくお願いいたします。

  • ブラウザーの戻るボタンを押して戻ったときのみJavaScriptを実行したい

    スタートページ[1]がありSubmitボタンを押すと、そこから別のページへ[2]リンクし、[3]等へつながります。 [2]や[3]等から[1]にブラウザーの戻るボタンを教えて戻った場合にとあるJavaScriptのコードを実行したいのですが、戻った際にページの再読込をなるべくさせずに行いたいです。 現在、Submitボタンを押すと同時に押したときのパラメータをCookieにも保存してあります。 方法としては以下の2パターンが考えられますが、いずれも方法が分かりません。 ・ページの表示が再び有効になる際、cookieにデータがあればそのデータを使う。 ・ブラウザーの戻るボタンを押した事を判定するコードを使ってフォームを再現する。 御指南頂けませんでしょうか。お願いします。 -------------------------------------------------- 何をしているかといいますと、DHTMLで複数のselectフォームを左から順に、前の項目によって次の項目の内容が変化する、というものを作りました。ですがフォーム送信した後、ブラウザーの戻る機能を使ってフォームのあるページに戻ると元々は[選択してください]という項目しかないために存在しないSelectボックスのOptionIndexを参照され、空白となってしまうのを避けたいのです。(new Optionを利用)