指定のdiv内にある一行目(もしくは、最初の3つ)のtdタグに対して
JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか?
【HTML参考】
<div id="box">
<table>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
<td>セル5</td>
<td>セル6</td>
</tr>
</table>
</div>
上記のような時、div#box内の「セル1~3」に対してclass名を付けたいと言った場合です。
よろしくお願いいたします。
A 回答 (6件)
- 最新から表示
- 回答順に表示
No.6
- 回答日時:
<html>
<head><style> .red{ background-color:#c00; } </style></head>
<body>
<div id="box">
<table id="tb">
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
<td>セル5</td>
<td>セル6</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>
直感的で俺はこれが楽。
No.4
- 回答日時:
<?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>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
<tr>
<td>セル4</td>
<td>セル5</td>
<td>セル6</td>
</tr>
</table>
</div>
</body>
</html>
<!--
Q. 今までの回答でgetAttributeを使ってたのに,何でgetAttributeNodeなんていう回りくどい記述をしているんですか?
A. W3Cの仕様と違うことに気づいてショックを受けたからです。MDCのgetAttributeメソッドのNotesを見てください。
Q.Mozilla,Safari,Operaで動作しないんですが。
可能性として二つ。
一つはapplication/xhtml+xmlで配布していないことが原因です。
text/htmlで配布する場合XPathの名前空間接頭辞を取り外し,
引数として与えている名前空間リゾルバをnullにしてください。
もう一つは,gooのシステムがURIっぽい文字列の前後に文字を埋め込むため,これを削除しないと正しい名前空間宣言として認識してくれなかったり,名前空間リゾルバ中の文字列リテラルが崩れたりします。かなり苦労しないと回答時には直せないので直しません。
Q. IEで動作しないんですが。
A. 理由は色々ありますが,直す気がありません。
application/xhtml+xmlをIEが読まないこと。
application/ecmascriptをIEが読まないこと
document.evaluateがIEにないこと
Q.他に言いたいことは?
A.getElementByIdは単一の要素返すからElementですけど,
getElementsByTagNameはノードリストなのでElementsなんですよね…。
-->
No.3
- 回答日時:
No2です。
質問の趣旨を捉え違えていたようです。ごめんなさい。。。1行目だけ取りたいなら以下のような方法でいかがでしょうか?
var divNode = document.getElementById("box");
var trNodeList = divNode.getElementByTagName("TR");
var tdNodeList = trNodeList[0].getElementByTagName("TD");
No.2
- 回答日時:
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";
}
こんな感じでしょう。(※誤字あったらスマソ)
ちなみに上記例では「セル1~6」に対してclass名を付けています。
No.1
- 回答日時:
答えをそのまま書くのは約束でできないからヒントを
・div['box']の中の「td」群を取り出す。
・該当する値が入っているなら class という名前の「属性」に値を書き込む
こんな流れになるよ。
http://www.tohoho-web.com/js/dom.htm#getElements …
「javascript dom」辺りで探すと良いよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
クリックされたセルの位置を取得するには?
JavaScript
-
一覧から選択した行の行番号を取得について
JavaScript
-
-
4
テーブルの任意の列を非表示にしたい
HTML・CSS
-
5
特定<table>内の<td>の色を変える
JavaScript
-
6
至急!GetElementById でtdのidの値を取得、サブウインドに取得したデータを表示
JavaScript
-
7
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
8
<JavaScript>tableタグを入力不可にしたい。
JavaScript
-
9
テーブルの位置を細かく指定したい。
HTML・CSS
-
10
リクエストに応じたselectedの初期値設定方法
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
至急!GetElementById でtdの...
-
HTML中のTABLEのデータを抽出す...
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
別ページからOnclickでテーブル...
-
javascript クリックすると、あ...
-
チェックボックスにチェックが...
-
テキストだけonCllickを検知したい
-
JavaScriptで特定のtdタグにcla...
-
テキストの再表示
-
スクロールバーの表示位置を変...
-
テーブル列の表示・非表示機能...
-
▲▲JavaScriptに詳しい人見てく...
-
表内の列や行の結合に関して
-
データバインドで生成したテー...
-
javascriptで指定するtrを削除...
-
JavaScriptでテーブルをクリッ...
-
jqueryとscriptでTABLEのセルを...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
マウスをブラウザの外に出した...
-
Selenium.ChromeDriverの使い方...
-
「オブジェクトは、このプロパ...
-
リンク色の変更
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
テーブル内に表示されている数...
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
おすすめ情報