• ベストアンサー
  • 困ってます

正規表現で、希望するセルへ色を一括で付けたいです。

■やりたいこと c[数字n桁]g[数字n桁]_2のセル(以下例の場合、2と5)の色を変えたいです。 ■例 <table> <a href="#" onClick="document.getElementById(正規表現でできる?).bgColor = 'blue';">クリックして2と5の背景を青に変更</a> <tr><td id="c77g111_1"> 1 </td></tr> <tr><td id="c77g111_2"> 2 </td></tr> <tr><td id="c77g111_3"> 3 </td></tr> <tr><td id="c77g112_1"> 4 </td></tr> <tr><td id="c77g112_2"> 5 </td></tr> <tr><td id="c77g112_3"> 6 </td></tr> </table>

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数1733
  • ありがとう数3

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

  • ベストアンサー
  • 回答No.1

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> //<![CDATA[ var regexp = new RegExp("^c[0-9]{2}g[0-9]{3}_2$"); function test(){ //個人的にはgetElementsByTagNameNSが使いたい。 var tds = document.getElementsByTagName("td"); for (var i = 0;i <tds.length;i++){ if (regexp.test(tds[i].getAttribute("id"))){ tds[i].setAttribute("style","background-color:red;"); } } } //]]> </script> </head> <body> <table> <!-- XHTMLとしてではなくHTMLとして解釈させる場合は, tbody要素はあったほうがいい。 --> <tbody> <tr><td id="c77g111_1">1</td></tr> <tr><td id="c77g111_2">2</td></tr> <tr><td id="c77g111_3">3</td></tr> <tr><td id="c77g112_1">4</td></tr> <tr><td id="c77g112_2">5</td></tr> <tr><td id="c77g112_3">6</td></tr> </tbody> </table> <!-- anchorはtable要素の直下に置けない--> <p onclick="test();">クリックして2と5の背景を青に変更</p> </body> </html> ======================================= #MinefieldとOperaでテスト。 #ワンライナーは諦めた。 #XPath 2.0もサポートしてないだろうから諦めた。 #環境によってはsetAttributeで即座にレンダリングに反映されないかもしれない。 #個人的には正規表現嫌い。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

教えていただいた方法で無事IEとFirefoxで実現でき大変助かりました。 ありがとうございます。 setAttributeが遅そうとのことでしたので、 document.getElementById(n).className を指定してみました。

関連するQ&A

  • 正規表現

    Java 5.1 java.util.regex.Pattern java.util.regex.Matcher を用いてHTMLのTABLEを抽出したいのですが、ヒットしません。正規表現のパターンはどうしたらいいのでしょう? パターン: < *table.*?>[\s.]*?< */table *?> 検索対象: … <table border=1 width=200> <tr><th>AA</th><th>BB</th></tr> <tr><td>CC</td><td>DD</td></tr> <tr><td>EE</td><td>FF</td></tr> </table> … で、TABLEタグを含むTABLE全体を期待したのですが全くヒットしませんでした。 ちなみに * <table …>と</table>単体ではヒットします。 * ソースから改行文字を取り除いて一行テキストとした場合にはヒットします。 これらのことから、改行文字がマッチしていないことが原因かと思うのですが、パターンの正規表現についてご教授願います。

    • ベストアンサー
    • Java
  • 正規表現について教えてください。

    正規表現について教えてください。以下は左に配置したサムネイル(X01s、X01as、X01bs・・・)をクリックすると右にそのサムネイルの拡大画像(X01l、X01al、X01bl・・・)を表示するページです。 サムネイルのimgタグを▼以下のようにしたいと考えています。 ※makethumbnail.cgiはサムネイル作成CGI 現在:<img src="X01s.jpg"> 変更後:<img src="/makethumbnail?src=X01s.jpg&w=100&h=&type="> ▼以下はダメでした。正規表現に問題があるのでしょうか。 <img src="/makethumbnail.cgi?src=' + img + 's' + ext + '&w=100&h=&type=" class="thumbnail" onclick="changeImage(this)"> お知恵をお借りできれば幸いです。 <head> <script type="text/javascript"> location.search.match(/^\?img=([^&]+)(\.[^&\.]+)&num=(.+)$/); var img = RegExp.$1; var ext = RegExp.$2; var num = Number(RegExp.$3); function changeImage(img){ var imgsrc = img.src || img; imgsrc.match(/^(.*)s(\.[^\.]+)$/); document.main.src = RegExp.$1 + "l" + RegExp.$2; return false; } document.write = img && ext && num ? document.write : function(){}; </script> </head> <body> <table> <tr> <th> <script type="text/javascript"> /* サムネイル */ document.write('<a href="#"><img src="' + img + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"></a><br /><br />'); for (var i = 1; i < num; i++) { document.write('<a href="#"><img src="' + img + String.fromCharCode(0x60 + i) + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"></a><br><br>'); } </script> </td> <td> <script type="text/javascript"> /* 拡大 */ document.write('<img src="' + img + 'l' + ext + '" name="main" id="main_image" />'); </script> </td> </tr></table>

  • VBAもしくはVB6の正規表現でHTMLの切り抜き

    入れ子になったタグの相手を探したいと思います。 abcテーブルとxyzテーブルは入れ子になっていますが、 それぞれのtableタグの相手の終了タグを探して 取り込みたいのですが、どうやればいいでしょうか? <table id="abc" width="200" border="1"> <tr> <TD>A</td> <TD>B <table id="xyz" width="200" border="1"> <tr> <td>J</td> <td>K</td> <td>L</td> </tr> <tr> <td>M</td> <td>N</td> <td>O</td> </tr> <tr> <td>P</td> <td>Q</td> <td>R</td> </tr> </table></td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </table>

その他の回答 (2)

  • 回答No.3

function colorChange(tag, myReg, css) {  var t = document.getElementsByTagName(tag), i = 0, o;  while (o = t[i++]) if (myReg.test(o.id)) o.style.cssText = css; } colorChange('td', /^c[0-9]{2}g[0-9]{3}_2$/, 'background-color:blue;font-size:40px;'); じぶんならこうなります2 ^^;

共感・感謝の気持ちを伝えよう!

  • 回答No.2

function colorChange(){ tds = document.getElementsByTagName('td'); for(i=0;i<tds.length;i++){ if(tds[i].id.match(/^c77g11(1|2)_2$/)){ tds[i].style.backgroundColor = "#0000ff"; } } } 自分ならこうなります。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • 要素の表示/非表示の実験

    をしてみました。 <input type="button" onclick="f()" value="push"/> <input type="button" onclick="g()" value="push"/> <table> <tr><td>a</td><td>b</td><td>c</td></tr> <tr id="x"><td>x</td><td>y</td><td>z</td></tr> <tr><td>u</td><td>v</td><td>w</td></tr> <tr id="y"><td>x</td><td>y</td><td>z</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </table> <script> function f() { var x=document.getElementById('x').style.visibility; if(x=='hidden') document.getElementById('x').style.visibility='visible'; else document.getElementById('x').style.visibility='hidden'; } function g() { var x=document.getElementById('y').style.display; if(y!='none') document.getElementById('y').style.display='none'; else document.getElementById('y').style.display='block'; } </script> です。 最初のボタンは単に表示するかどうかだけで位置は消えた場所に詰められません。 次のボタンは消えるとその場所に他の要素が詰められます。しかし消えたものは次にボタンを押しても消えたままです。 消えた場所に要素が詰められしかも再表示できるようにするにはどうしたらいいのでしょうか?

  • VBで正規表現

    VBで正規表現 下記のような文字列がTextBoxに入力されています。 <a></a>で囲まれた部分の抽出は出来ましたが、 <td></td>タグで囲まれた’18’も取り出したいのですが正規表現ではどの様に記述すれば宜しいでしょうか? 関係有りそうなコードはこれです。 Regex("<a href=""(?<url>.*?)"".*?>(?<text>.*?)</a>" ---------------------------------------- <TR bgcolor=#ffffff> <TD> 18 </TD> <TD><a href="main.py?qtype=userpage&teamnum=162&username=KOTOKO"> KOTOKO </a> </TD> <TD><a href="http://fah-web2.stanford.edu/awards/cert.php?u=KOTOKO&pts=11379753" target="_blank"> 11379753 </a> </TD> <TD><a href="http://fah-web2.stanford.edu/awards/cert.php?u=KOTOKO&pts=16190&t=wus&bg=3" target="_blank"> 16190 </a> </TD> </TR> ----------------------------------------

  • クリックするとテーブルの列の背景色が変わる/元に戻る

    このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30">&nbsp;</TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>

  • VB2005の正規表現について

    文字列の中から特定の文字列を抜き出そうとしています。 例) <TD align=left noWrap bgcolor=#ffffff rowspan=2>AAA</TD> 例の文字列の中からAAAだけを抜き出すにはどのような正規表現を 用いたらよいでしょうか。 御教授下さい。 開発環境:Visual Basic 2005 Express Edition

  • HTMLから正規表現で必要な情報を取得したい

    以下のようなHTMLがあり、PHPで正規表現を使い(A)~(J)の値を取得したいのですが、 どのような正規表現を書けば取得できるか迷っています。 正規表現でなくとも取得できる方法があればご教示ください。 どうかお願いいたします。 ※ちなみにPHP5です。 ---------------------------------------------------------- ~省略~ <tr bgcolor="#ffffff"> <td align="center">(A)<br></td> <td align="center">(B)<br></td> <td align="center">(C)<br></td> <td><a href="http://aaaaa.co.jp">(D)</a><br></td> <td align="right">(E)</td> <td align="right">(F)<br></td> <td align="right">(G)</td> <td align="right">(H)</td> <td align="right">(I)</td> <td align="center" nowrap><font color="#FFFFFF">(J)</font></td> </tr> ~省略~

    • ベストアンサー
    • PHP
  • クリックで色変更後に既に変更された要素を戻すには

    javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが3つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。 質問したい内容は、「1箇所をクリックした時に、他の2箇所の色を戻す」方法です。 以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- 1箇所をクリックした時に、他の2箇所の色を戻すには 「00をクリックした時に、01の色を戻す02の色を戻す」のように、 3箇所全てに記述しなければならないのでしょうか? テーブルのブロックが少なければ、これでもいいのですが、 たとえば100個とか1000個になった時にはとても大変な作業になってしまいます。 他になにか効率のいい記述の仕方はありますでしょうか? ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。

  • tableセルに色を付ける

     tableセルに色を付けます。  で、行で指定しようとtrタグにbgcolorをいれました。  ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。  セルを結合させたりしたりしてることが影響あるのでしょうか?ieのバグですかね?  コレを解決するには、trで色を付けるのを諦めて、セルごと(tdやth)に指定していくしかないのでしょうか。  スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">1</td>  <td>あ</td> </tr> <tr>  <td>い</td> </tr> <tr bgcolor="red">  <td>2</td>  <td>う</td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • Javascript クリックした場所のみセルの色を変えたい

    HTML・JSともに初心者です。 よろしくお願いします。 現在テーブルの作成を行っており、 リンクをクリックしたセルのみ色を変更するという物を作りたいのですが、うまくいきませんorz ※現在は文字の色が変わっているとおもいます・・・ 現在下記のように作成しましたが困っております。 どのように直せばよいかご教授願います。 --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サンプル</TITLE> <script language="javascript"> <!-- var nCountMax = 5; //リンクの数 var arrColor= new Array("#000000", "#FFFFFF"); function Set(nIndex) { var strName, nLoop; if (document.getElementById) { for (nLoop = 0; nLoop < nCountMax; nLoop++) { //strName = "lnkMouse"+nIndex; if (nLoop != nIndex) { document.getElementById("lnkMouse"+nLoop).style.background=arrColor[1]; } else { document.getElementById("lnkMouse"+nIndex).style.background=arrColor[0]; } } } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0"> <table border="1" width="500"> <tr> <td><a href="#" onClick="Set(0);" name="lnkMouse0">クリック</a></td> <td><a href="#" onClick="Set(1);" name="lnkMouse1">クリック</a></td> <td><a href="#" onClick="Set(2);" name="lnkMouse2">クリック</a></td> <td><a href="#" onClick="Set(3);" name="lnkMouse3">クリック</a></td> <td><a href="#" onClick="Set(4);" name="lnkMouse4">クリック</a></td> </tr> </table> </BODY> </HTML> ---

  • 指定した要素を含んだテキストで取得する

    <table>  <tr id="aaa"><td>あああ</td></tr>  <tr><td>いいい</td></tr> </table> <script> alert(document.getElementById("aaa").innerHTML) </script> 上記のようなHTMLを実行すると 「<td>あああ</td>」と表示されますが これをid指定されている<tr>要素を含んだ形で 即ち「<tr id="aaa"><td>あああ</td></tr>」というように 取得するにはどのような方法が考えられるでしょうか?

  • PHP 正規表現の書き方おしえてください!

    PHP&正規表現初心者です。 ヤフーファイナンスランキングから順位ごとに株価データを取得したいの ですが、正規表現の書き方がわからず意図したデータが取得できません。 ご教授ください。 ソース ************************************************ &#65374; <tbody> <tr class="rankingTabledata yjM"> <td class="txtcenter">1</td><td class="txtcenter"> <a href="http://stocks.finance.yahoo.co.jp/stocks/detail/?code=0002.t">0002</a></td> <td class="txtcenter yjSt">東証JQS</td> <td class="normal yjSt">(株)シxダー</td> <td class="txtcenter grey yjSt">12/18</td> <td class="txtright bold">313</td> <td class="txtright bgyellow02"><span class="greenFin">+23.72</span>%</td> <td class="txtright bgyellow03"><span class="greenFin">+60</span></td> <td class="txtright">5,917,300</td> <td class="txtcenter yjSt"> <a href="http://textream.yahoo.co.jp/rd/finance/0002">掲示板</a></td></tr> <tr class="rankingTabledata yjM"> <td class="txtcenter">2</td><td class="txtcenter"> <a href="http://stocks.finance.yahoo.co.jp/stocks/detail/?code=0003.t">0003</a></td> <td class="txtcenter yjSt">マザーズ</td> <td class="normal yjSt">(株)リxアワールド</td> <td class="txtcenter grey yjSt">12/18</td> <td class="txtright bold">2,125</td> <td class="txtright bgyellow02"><span class="greenFin">+23.19</span>%</td> <td class="txtright bgyellow03"><span class="greenFin">+400</span></td> <td class="txtright">6,800</td> <td class="txtcenter yjSt"> <a href="http://textream.yahoo.co.jp/rd/finance/0003">掲示板</a></td></tr> <tr class="rankingTabledata yjM"> <td class="txtcenter">3</td> &#65374; *********************************************** ソースはこんな感です。 ↓私のクソ文章 $n = preg_match_all("{<tr class=\"rankingTabledata yjM\"><td class=\"txtcenter\">(.*)</td><td class=\"txtcenter\"><a href=.*>(.*)</a>}", $feed, $cell, PREG_PATTERN_ORDER); preg_match_allで配列に格納して表示させたいのですが、 うまくいきません。 echo "1位  " . $cell[1][0] . " " . $cell[1][1] . " " . $cell[1][2] .....??"\n"; echo "2位  " . $cell[1][1] . "\n" ?????; &#65374; ???3次配列ですか?? 混乱します。 ☆☆☆理想☆☆☆☆ 1位 2435 東証JQS (株)シダー 12/18 313 +23.72 % +60 5,917,300 2 位 3691 マザーズ (株)リアルワールド 12/18 2,125 +23.19% +400 6,800 &#65374; ☆☆☆☆☆☆☆☆☆ 取得した株価コードから別サイトを検索したいので 各項目ごとに別要素で表示させたいです。 ダメダメなので よろしくおねがいします。

    • ベストアンサー
    • PHP