- ベストアンサー
正規表現で、希望するセルへ色を一括で付けたいです。
■やりたいこと 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>
- php4
- お礼率42% (373/888)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<?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で即座にレンダリングに反映されないかもしれない。 #個人的には正規表現嫌い。
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
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;'); じぶんならこうなります２ ^^;
- t_netbug
- ベストアンサー率34% (15/44)
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"; } } } 自分ならこうなります。
お礼
教えていただいた方法で無事IEとFirefoxで実現でき大変助かりました。 ありがとうございます。 setAttributeが遅そうとのことでしたので、 document.getElementById(n).className を指定してみました。