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

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

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

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

jQuery

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

Bootstrap

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

Q&A

解決済

1回答

2100閲覧

JavascriptでのTable指定について

mion2016

総合スコア7

JavaScript

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

jQuery

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

Bootstrap

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

0グッド

0クリップ

投稿2016/09/13 06:09

編集2016/09/13 07:28

###前提・実現したいこと
TornadoでWebSocketのシステムを作成しております。
下記のURLのコードを参考にさせていただいております。
https://github.com/hiroakis/tornado-websocket-example
質問はWebSocketそのものではなく、HTMLの表示側です。
一つ、上記のHTMLのTableの項目(ソース上のstatus)を
追加して、この各項目に条件に応じた文字を表示させたいと思います。
たとえばjson.value = 1なら「異常が発生しました。」、
json.value = 2なら「確認してください。」などの文字列を
Table内に表示させたいです。
javascript, Bootstrapなど、まだ初心者でよくわかっておりません。
質問が的外れかもしれませんが、どうぞよろしくお願い致します。

###該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <title>tornado WebSocket example</title> 5 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> 6 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 7</head> 8<body> 9 <div class="container"> 10 <h1>tornado WebSocket example</h1> 11 <hr> 12 WebSocket status : <span id="message"></span> 13 <hr> 14 <h3>The following table shows values by using WebSocket</h3> 15 <div class="row"> 16 <div class="span4"> 17 <table class="table table-striped table-bordered table-condensed"> 18 <tr> 19 <th>No.</th><th>id</th><th>value</th><th>status</th> 20 </tr> 21 <tr id="row1"> 22 <td> 1 </td><td> id 1 </td><td id="1"> 0 </td><td "hogehoge"></td> 23 </tr> 24 <tr id="row2"> 25 <td> 2 </td><td> id 2 </td><td id="2"> 0 </td><td "hogehoge"></td> 26 </tr> 27 <tr id="row3"> 28 <td> 3 </td><td> id 3 </td><td id="3"> 0 </td><td "hogehoge"></td> 29 </tr> 30 </table> 31 </div> 32 </div> 33 <hr> 34 <h3>TEST</h3> 35 <img src="./floor2.jpg"/> 36 <script> 37 var ws = new WebSocket('ws://localhost:8888/ws'); 38 var $message = $('#message'); 39 40 ws.onopen = function(){ 41 $message.attr("class", 'label label-success'); 42 $message.text('open'); 43 }; 44 ws.onmessage = function(ev){ 45 $message.attr("class", 'label label-info'); 46 $message.hide(); 47 $message.fadeIn("slow"); 48 $message.text('recieved message'); 49 50 var json = JSON.parse(ev.data); 51 $('#' + json.id).hide(); 52 $('#' + json.id).fadeIn("slow"); 53 $('#' + json.id).text(json.value); 54 55 var $rowid = $('#row' + json.id); 56 if(json.value = 1){ 57 $rowid.attr("class", "warning"); 58 document.getElementById("hogehoge").innerHTML = "abc"; 59 } 60 else if(json.value = 2){ 61 $rowid.attr("class", "warning"); 62 document.getElementById("hogehoge").innerHTML = "cdb"; 63 } 64 else{ 65 $rowid.attr("class", "error"); 66 document.getElementById("hogehoge").innerHTML = "error"; 67 } 68 }; 69 ws.onclose = function(ev){ 70 $message.attr("class", 'label label-important'); 71 $message.text('closed'); 72 }; 73 ws.onerror = function(ev){ 74 $message.attr("class", 'label label-warning'); 75 $message.text('error occurred'); 76 }; 77 78</script> 79</body> 80</html>

###試したこと
上記のように<td "hogehoge"></td>
document.getElementById("hogehoge").innerHTML = "abc";
として
"hogehoge"に文字列を入れるということはできたのですが、
各行ごとに値を指定できていません。

###補足情報(言語/FW/ツール等のバージョンなど)

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

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

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

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

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

kei344

2016/09/13 07:19

コードのコピペを失敗していませんか?重複部分が多く、一部では意味のつながりがわかりにくくなっています。
mion2016

2016/09/13 07:29

さきほどコードを修正いたしました。よろしくお願い申し上げます。
kei344

2016/09/13 07:37

ev.data はどういった中身でしょうか。また、row1、row2、row3をそれぞれ用意していることにはどういう意味があるのでしょうか。
guest

回答1

0

ベストアンサー

HTML

1<td id="1"> 0 </td><td "hogehoge"></td> 2```これは 3```HTML 4<td id="hoge1"> 0 </td><td id="hogehoge"></td> 5```か 6```HTML 7<td id="hoge1"> 0 </td><td class="hogehoge"></td> 8```にしてください。 9 10idには数値も指定出来ますが、数値からはじめることはできません。そのため半角英字からはじめるようにしてください。 11 12また、同一ページ内で同じidを使うことはできません。 13 14--- 15 16tableの要素に対してjQueryのfadeを使用していますが、これも効かないと思われます。td要素の中にdivを入れ、その中にコンテンツを配置するようにして、それをfadeすることは出来ます。 17 18```HTML 19<tr id="row"><td><div></div></td></tr>

JavaScript

1// $('#' + json.id).hide(); 2// ↓ 3 $( '#row td > div' ).hide();

<td class="hogehoge"></td> とした場合、下記のように書くことが出来ます。

JavaScript

1$( '#' + json.id + ' .hogehoge' ).text( 'value!' ); 2// or 3$( '#' + json.id ).find( '.hogehoge' ).text( 'value!' );

もしtableをレイアウトに使用しているのであれば、できればやめたほうが良いと思います。(推奨されていません)

<table> - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

注意: CSS が作られる前、 HTML の <table> 要素はしばしば、ページレイアウトの方法として用いられました。この使い方は HTML 4 から推奨されておらず、 <table> 要素はレイアウト目的に使用されるべきではありません。

投稿2016/09/13 07:57

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問