###前提・実現したいこと
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/ツール等のバージョンなど)
回答1件
あなたの回答
tips
プレビュー