JavaScriptで特定のtdタグにclass名をつけたい

締切済

質問者：redhot-aky
質問日時：2008/08/08 18:31
回答数：6件

指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して
JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？

【HTML参考】
<div id="box">
<table>
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
<tr>
<td>セル４</td>
<td>セル５</td>
<td>セル６</td>
</tr>
</table>
</div>

上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： _pipi_
回答日時：2008/08/09 21:52

<html>

<head><style> .red{ background-color:#c00; } </style></head>
<body>
<div id="box">
<table id="tb">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
<tr>
<td>セル４</td>
<td>セル５</td>
<td>セル６</td>
</tr>
</table>
</div>
<script>
window.onload=function(){
ob = document.getElementById('tb').rows[0].cells;
for(i=0;i<ob.length;i++) ob[i].className='red';
}
</script>
</body>
</html>
直感的で俺はこれが楽。

- 0
- 件

通報する

No.5

回答者： himajin100000
回答日時：2008/08/09 03:23

あともう一つ動かない原因あった。

gooのシステムが
U+005CをU+00A5に置き換えてた気がする。

- 0
- 件

通報する

No.4

回答者： himajin100000
回答日時：2008/08/09 03:15

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q237452 TestCase 1</title>
<style type="text/css">
table{
border-collapse:separate;
}
td.special{
border-style:solid;
background-color:red;
border-color:green;
border-width:medium;
}
</style>
<script type="application/ecmascript"><![CDATA[
function initialize(){
var tds = document.evaluate("//xhtml:div[@id='box']/xhtml:table/xhtml:tr[1]/xhtml:td",document.documentElement,getNS,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
for (var i = 0; i < tds.snapshotLength;i++){

var attr = tds.snapshotItem(i).getAttributeNode("class");
var attrval = "";
if (attr !== null){
attrval = attr.nodeValue;
}
var arr = attrval.split(new RegExp("[\\u0009|\\u0020|\\u000A|\\u0000C|\\u000D]","g"));
for (var j = 0;j < arr.length;j++){
if (arr[j] == ""){
arr.splice(j,1);
}
}
if (arr.indexOf("special") < 0){
arr.push("special");
}
attrval = arr.join("\u0020");
tds.snapshotItem(i).setAttribute("class",attrval);
}
}
function getNS(prefix){
switch(prefix){
case "xhtml":
return "http://www.w3.org/1999/xhtml";
default:
throw new RangeError();
}
}
]]></script>
</head>
<body onload="initialize();">
<div id="box">
<table>
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
<tr>
<td>セル４</td>
<td>セル５</td>
<td>セル６</td>
</tr>
</table>
</div>
</body>
</html>

- 1
- 件

通報する

No.3

回答者： OKbokuzyo
回答日時：2008/08/08 21:21

No2です。

質問の趣旨を捉え違えていたようです。ごめんなさい。。。

１行目だけ取りたいなら以下のような方法でいかがでしょうか？

var divNode = document.getElementById("box");
var trNodeList = divNode.getElementByTagName("TR");
var tdNodeList = trNodeList[0].getElementByTagName("TD");

- 1
- 件

通報する

No.2

回答者： OKbokuzyo
回答日時：2008/08/08 21:17

DOMを利用しても良いですが

どちらかというとJavaScript(HTML)では
classNameプロパティを使う人の方が多いかと思います。

var divNode = document.getElementById("box");
var tdNodeList = divNode.getElementByTagName("TD");
for(var i = 0; i < tdNodeList.length; i++) {
　tdNodeList[i].className = "ClassName";
}

こんな感じでしょう。（※誤字あったらスマソ）
ちなみに上記例では「セル１～６」に対してclass名を付けています。

- 0
- 件

通報する

No.1

回答者： SAYKA
回答日時：2008/08/08 18:41

答えをそのまま書くのは約束でできないからヒントを

・div['box']の中の「td」群を取り出す。
・該当する値が入っているなら class という名前の「属性」に値を書き込む

こんな流れになるよ。

http://www.tohoho-web.com/js/dom.htm#getElements …
「javascript dom」辺りで探すと良いよ。