JSでテーブルのsummaryやclassを設定する方法

このQ&Aのポイント
  • JSを使用してテーブルのsummaryやclassを設定する方法について教えてください。
  • 現在、テーブルのsummaryとclassを指定するためにJSを使用していますが、正常に機能しません。
  • ダブルコーテーションで括るとエラーが発生します。他の方法でテーブルのsummaryとclassを設定することは可能でしょうか?
回答を見る
  • ベストアンサー

summary=テスト1 class=テスト2

http://note.chiebukuro.yahoo.co.jp/detail/n15842 このような事をしたいのですが JSの中身を function myGet() { $("#tableData").html("データを読み込み中...."); var myWD = $("#my01").val(); var myRe = jQuery.get("mydata.txt",null, function(){ var myTXT = myRe.responseText; var myLF = String.fromCharCode(10); var myTAB = String.fromCharCode(9); var myTR = myTXT.split(myLF); var myTBL = "<table summary=テスト1 class=テスト2>"; for (var i=0; i<myTR.length; i++){ var myTD = myTR[i].split(myTAB); if(myTD[0].indexOf(myWD,0) > -1 || i==0){ myTBL += "<tr>"; for (var j=0; j<myTD.length; j++){ myTBL += "<td>"+myTD[j]+"</td>"; } myTBL +="</tr>"; } //if } //for myTBL += "</table>"; $("#tableData").html(myTBL); }); //get とすると、エラーにはならないのですが、 summary=テスト1 class=テスト2が出来ようされていません。 ダブルコーテーションで括るとエラーになります。 このようにテーブルのsummaryやclassに設定する事は出来ないのでしょうか? JSファイル以外の方法で可能なのでしょうか?

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

  • ベストアンサー
  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.1

プログラミングを始めてする方なのでしょうか…。 プログラムを全部チェックしていませんが、 >ダブルコーテーションで括るとエラーになります。 ここだけが問題ならとりあえず、ダブルがダメならシングルクォーテーションで書いてみてきださい。 その他、どうしてもダブルクォーテーションで書きたいなら円マークでエスケープしてもいいです。どんな言語でも大体同じですよ。

ywfwyyzov
質問者

お礼

ありがとうございました。

関連するQ&A

  • <table summary="test1 tes

    classの場合は、 <div class="test1 test2"> が出来ますが、 テーブルで <table summary="test1 test2"> とは出来ないのでしょうか? 二つのテーブルに対するcssを作ったので、二つとも適用させたいです。

    • ベストアンサー
    • CSS
  • 特定のclassを表示、非表示にする

    javascriptで特定のclassを表示、非表示にする方法を検討中なのですが、 a,b,cと三つのボタンが有り、abcというclassがあります。 aをクリックするとb,cが非表示になり、aが表示される bをクリックするとa,cが非表示になり、bが表示される cをクリックするとa,bが非表示になり、cが表示される と言う動作をさせたいのですが、上手くいきません。 どなたかご教授ください。 お願いいたします。 <script type="text/javascript"> <!-- function change(site){  if(!document.getElementsByTagName){return;}  var e = new Array('a','b','c');  var objs = document.getElementsByTagName('*');  for(i=0;i<e.length;i++){   if(e[i] != site){    for(y=0;y<objs.length;y++){     if(objs[y].className == e[i]){      objs[y].style.display = 'none';     }else{      objs[y].style.display = '';     }    }   }  } } // --> </script> <table cellspacing="10"> <tr> <th>テスト</th> <td> <input type="text" name="" id="" class="a" value="" /> <input type="text" name="" id="" class="b" value="" /> </td> </tr> <tr> <th>test</th> <td> <input type="text" name="" id="" class="c" value="" /> </td> </tr> </table> <a href="javascript:change('a')">a</a> <a href="javascript:change('b')">b</a> <a href="javascript:change('c')">c</a>

  • prototype.jsを利用して

    よろしくお願いします。prototype.jsを使い、 データバインドを利用せず、csvファイルを読込ませ、safariで 表示できるようにサンプルを利用して作成しました。 csvのレコードは400くらいあります。このレコードデータを テーブル3列の繰り返しで表示したいのですが、以下のソースで 行うようにするとどうしても3列表示したら繰り返しせず 終了してしまいます。 3列表示させる部分の値を変数へ渡してループにすれば出来るような感じがするのですが、そのように想定したものを記述してもどうしても 3列で終了してしまいます。 データバインドで散々質問したのですが、再度お知恵をお借りしたいです。どうかよろしくお願いします。 --------------------------------------------------------------- <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- window.onload = function(){ var msec = (new Date()).getTime(); new Ajax.Request("list2.csv", { method: "get", parameters: "cache="+msec, onSuccess:function(httpObj){ var text = httpObj.responseText; var LF = String.fromCharCode(10); var tabText = text.split(LF); var color= "red"; var leng=tabText.length; var retu=0; var cnt=0; var m=0; var tbl = "<table border='1'>"; var tbb = "<td><table border='1'>"; while(cnt<3){ //試しに3回ループさせてみる tbl += "<tr>"; var w=m; var a=w; var s=w+1; var f=0; while(retu<3){ //3列分表示 tbl += "<td><table border='1'>"; for (var i=a; i<s; i++){  var cText = tabText[i].split(","); tbl += "<tr><td><img src="+cText[0]+"></td></tr>"; tbl += "<tr><td>"+cText[1]+"</td></tr>"; tbl += "<tr><td>"+cText[2]+"</td></tr>"; tbl += "<tr><td>"+cText[3]+"</td></tr>"; tbl += "<tr><td>"+cText[4]+"</td></tr>"; tbl += "<tr><td>"+cText[5]+"</td></tr>"; } a=a+1; s=s+1; retu++; tbl += "</table></td>"; } tbl += "</tr></table>"; cnt++; m=m+3; } $("tableData").innerHTML = tbl+color+leng+a; //変数で表示させたいものをここで宣言 }, onFailure:function(httpObj){ $("tableData").innerHTML = "エラーで読み込めませんでした"; } }); } //--> </script>

  • どのクラスで行なえばいいのでしょうか?

    <table summary="test1"> <tr> <td class="test2"> <h3 class="test3">○○のページ </h3> </td> </tr> </table> というhtmlのソースが有る場合 文字の装飾はどのクラスで行なえばいいのでしょうか? cssでやりたいです。 一番直前に囲ってるタグがh3なので、 class="test3"で行なえばいいですか?

    • ベストアンサー
    • CSS
  • domでの削除

    チェックボックスを使ってループで回しながらTRを削除しようとしているんですが、連続でチェックするとうまくいきません。 ご教授宜しくお願いします。 function test() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox" && inputs[i].checked) { tb1.deleteRow(i); } } }; <table border="1" id="tb1"> <tr> <td><input type="checkbox" name="flag" value=""></td> <td>0</td> </tr>      ・      ・      ・ <tr> <td><input type="checkbox" name="flag" value=""></td> <td>9</td> </tr> </table> <input type="button" value="削除" onclick="test();"><br> }

  • 検索結果について

    <script type="text/javascript"> function show(out){ var body = ""; var recs = out.split("<r>"); for(var i = 0; i <recs.length - 1; i++){ body += "<table width='100' border='3'><th>あああ</th><th>いいい</th>"; body += "<tr>"; var flds = recs[i].split("<i>"); for(var j = 0; j <flds.length - 1; j++){ if(j != 5){ body += "<td>" + flds[j] + "</td>"; }else{ if(flds[1]!=""){ } } } } $("#show").html(body); } </script> html、php、MySQLで検索システムの作成を行っているのですが、検索して表示される結果が      あああ                    いいい DBのあああの検索結果1         DBのいいいの検索結果1      あああ                    いいい DBのあああの検索結果2         DBのいいいの検索結果2 となってしまうのですが、<th>のあああ、いいいを一つだけにして         あああ                    いいい DBのあああの検索結果1         DBのいいいの検索結果1 DBのあああの検索結果2         DBのいいいの検索結果2 とするにはどうすればいいでしょうか。 上のjavascriptがどのようになっているのかよく分かっていない状態です。 よろしくお願いします。

  • 動的なcheckboxのcheckedについて

    動的にcgiから名簿tableを作り先頭にcheckboxを配置しています。 (□、コード、氏名) そのコードNo.取得し内容によってループ内でcheckboxをif文でオンオフしたいのですがコードNo.(rec[0])の取得方法がわかりません。できるはずとは思うのですが私の力不足で・・・。よろしくお願いします。 var recs = xhrObj.responseText.split("<r>"); var status2 = "<table id='meibo' ><tbody><tr>" +"<th width='20'><th width='40'>No.</th><th width='120'>氏名</th>" +"</tr>"; for(var i = 1; i < recs.length - 1; i++){ rec = recs[i].split("<i>"); status2 += "<tr><td><input type='checkbox' name='checkbox' id='"+i+"' /></td>"; status2 += "<td id='"+i+"' />"+rec[0]+"</td><td id='"+i+"' />"+rec[1]+"</td>"; status2 += "</tr>"; } status2 += "</tbody></table>"; document.getElementById("status2").innerHTML = status2; var observer = document.getElementById("meibo"); setListener(observer, "click", check);

  • cookieでcheckbox項目の追加と削除とソート表示

    http://www.din.or.jp/~hagi3/JavaScript/JSTips/Std/tbl.htm を参考に下記のようにcheckboxを付け加えました。 <script type="text/javascript"><!-- function tblfilter(nm,key){ if(!document.getElementsByTagName) return; var trs = document.getElementById(nm).rows; for(var i=0; i<trs.length; i++){ var li = trs[i]; if(!li.title || li.title=='') continue; var found=0; if(key == '') found=1; else { var keys = li.title.split(','); for(var j=0; j<keys.length; j++){ if(keys[j] == key){ found=1; break; } } } li.style.display = found?'':'none'; } } // --></script> </HEAD> <BODY> <FORM onsubmit="return false;"> <SELECT onchange="tblfilter('ex1',this.options[this.selectedIndex].value);"> <OPTION value="" selected>すべて</OPTION> <OPTION value=海>海の動物</OPTION> <OPTION value=陸>陸の動物</OPTION> <OPTION value=お気に入り>お気に入り</OPTION> </SELECT></FORM> <TABLE id=ex1> <TR title=海><TD><input type=checkbox value=1 title='追加'>1</TD><TD>いか</TD></TR> <TR title=陸,鳴く><TD><input type=checkbox value=2 title='追加'>2</TD><TD>いぬ</TD></TR> <TR title=海,鳴く><TD><input type=checkbox value=6 title='追加'>6</TD><TD>とど</TD></TR> </TABLE> </BODY></HTML> そして http://mugi.cc/js/030520.htm 上記のURLのようにcheckしたのをJavaScriptで保存し、 最終的にはselectからお気に入りを選んだ際、 checkしたものだけ表示するようにしたいと考えております。 お手数ですが、どなた様かご教授願いますようお願い致します。

  • JS テーブルデータ:シャッフル関数の修正

    JavaScript テーブルデータ:シャッフル関数の不具合を修正するには? ここに1つのテーブルがあります。 tbody td のセルデータをシャッフルする関数を作ってみました。 どこをどのように修正したらよいのでしょうか? 今のところ、下記の不具合があります。 ■ 行のシャッフルは出来るが、列のシャッフルがされていない  (すべてのTD内のシャッフルをしたい) <仕様> ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button2">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table> <script> //試作中 document.getElementById("button2").onclick = function (){ Array.prototype.shuffle = function(){ var t=this,a=t.length,b=[],c=a,i,r; for(i=0;i<a;i++)b[i]=t[i]; for(i=0;i<a-1;i++){ r=Math.floor(Math.random()*c); t[i]=b[r];b[r]=b[c-1];c--; } t[a-1] = b[0]; return t; }; var subject = document.querySelector("#table5 tbody"); var rowData = []; var rows = subject.getElementsByTagName("TR"); var cells; var i, j; for (i=0; i<rows.length; i++) { rowData[i] = []; cells = rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { rowData[i][j] = cells[j].innerHTML; } } rowData.shuffle(); for (i=0; i<rowData.length; i++) { cells=rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { cells[j].innerHTML = rowData[i][j]; } } } </script>

  • JSが正常な動作しないのはなぜ?

    HPを、ファイルから読み込んで表示するように変更しようと、Adobe Spry(Tab)とPrototype.jsを使って、JSで組みました。 内容は、csvファイルを読み取って、HTMLコードを生成し、Spryの指定のID(tabPanel1)に挿入して、Spryを起動するようにしています。が、最後のSpryがなぜか(タブ機能が)機能しません。起動直前にブレイクポインタを入れてとめると、ちゃんとタブが機能するようになります。デバッグ環境はFireFox3.5.7+FireBug on WindowsXP SP3+Apache2.5です。 問題のソースですが下記の通りです。 var TAB = String.fromCharCode( 9 ) ; var LFR = String.fromCharCode( 13 ) + String.fromCharCode( 10 ) ; window.onload = function() { // データファイルの読み取り var myData = new Ajax.Request( "data/linkdata.csv" , { method: "get", onSuccess:function(httpObj){ var line = httpObj.responseText ; var col = new Array(3) ; var bFlg = false ; var src1 = "<ul class='TabbedPanelsTabGroup'>" ; var src2 = "<div class='TabbedPanelsContentGroup'>" ; //var list = line.split("\n") ; var list = line.split( LFR ) ; for ( var i = 0; i < list.length ; i++ ){ if ( list[ i ].length == 0 ) break ; var dlist = list[ i ].split(TAB) ; if ( dlist[ 0 ].length > 0 ) { // 表題の設定 if ( bFlg ) { src2 += "</TABLE></div></div>" ; } src1 += "<li class='TabbedPanelsTab' tabindex='0'>" ; src1 += dlist[ 0 ] ; src1 += "</div></li>" ; src2 += "<div class='TabbedPanelsContent'>" ; src2 += dlist[ 0 ] ; src2 += "<TABLE width='605' bgcolor='#ffffff' border='2'>" ; src2 += "<TR>" ; src2 += "<TD align='center' width='150' bgcolor='" + "'><b>名称</b></TD>" ; src2 += "<TD align='center' width='450' bgcolor='" + "'><b>内容</b></TD></TR>" ; }else{ // 明細の設定 src2 += "<TR>" ; src2 += "<TD><FONT size=-1><A target='_blank' href='" + dlist[2] + "'>" src2 += dlist[ 1 ] + "</A></FONT></TD>" ; src2 += "<TD><FONT size=-1>" + dlist[3] + "</FONT></TD>" ; src2 += "</TR>" ; bFlg = true ; } } src1 += "</ul>" ; src2 += "</div>" ; $('tabPanel1').innerHTML = src1 + src2 ; }, onFailure:function(httpObj){ $('tabPanel1').innerHTML = "エラーにより読み込めませんでした"; } }); var tbObj1 = new Spry.Widget.TabbedPanels("tabPanel1"); } ここ数日ははまっていて、最後の関門でどうしてもうまく行きません。見ただけではわかりませんかもしれませんが、よろしくお願いします。なお、こちらはJSをはじめてからまだ、1年未満です。

専門家に質問してみよう