会員登録で5000円分が当たります

テーブルのセルがクリックされた時、そのセルの位置(行番号、列番号)を取得したいと思っています。
セルオブジェクトのプロパティ(?)がよく分からないのですが、どうすれば取得できますか?

ご回答よろしくお願いします。

A 回答 (1件)

行番号はセルの親(parentNode)の行(RowElement)のrowIndex、


列番号は自身のcellIndexを参照すると得られます。
※詳しくは参考URLのHTMLTableCellElementとHTMLTableRowElementを読んでみてください。


<td onclick="alert('行:'+this.parentNode.rowIndex+'列:'+this.cellIndex)">

参考URL:http://www.doraneko.org/misc/dom10/19981001/leve …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
参考URLも教えて頂けたおかげで、今までよく分からなかった部分が非常によく分かりました。
本当にありがとうございました!

お礼日時:2005/11/10 14:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q一覧から選択した行の行番号を取得について

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="Windows-31J" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="original" uri="/original-tags" %>
<%@taglib prefix="originalLY" uri="/original-LY-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="html-head.jsp" %>
<script type="text/javascript">
function btn_select(indx) {
alert (indx);
}
</script>
</head>
<body>
<%@ include file="HeaderTitle.jsp" %>
<s:form>
<table class="table_line" >
<tr>
<th rowspan=2 class="form_title_list" >選択</th>
<th rowspan=2 class="form_title_list" >A</th>
<th rowspan=2 class="form_title_list" >B</th>
<th rowspan=2 class="form_title_list" >C</th>
<th colspan=2 class="form_title_list" >D</th>
</tr>
<s:iterator value="shinchokuList" status="stat">
<tr>
<s:if test="%{#stat.index % 2 == 0}">
<td class="table_list1"><input type="button" value="選択" name="button"
onclick="btn_select(%{#stat.index});"/></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].A" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="sist[%{#stat.index}].B" size="63" maxlength="63" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].C" size="5" maxlength="5" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].D" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].E" size="10" maxlength="10" readonly="false" cssStyle="%{eErr}"/></td>
</s:if>
</s:else>
</s:iterator>
</table>
</td>
</tr>
</table>
</s:form>
</body>
<html>

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%...続きを読む

Aベストアンサー

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピペして動きを確認してみてください。
**********
<html>
<head><title>rowIndex test</title></head>
<body>
<table border="1" bordercolor="red">
<tr>
<td>
<input type="button" value="zero" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>
<input type="button" value="one" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
</body>
</html>
**********

alertの中身についての説明を少々致します。
this・・・INPUTタグ自身をさす。
this.parentNode・・・INPUTタグの親のタグの、TDタグをさす。
this.parentNode.parentNode・・・INPUTタグの親の親のタグの、TRタグをさす。


(2)ボタンが押された行ある項目にシステム日付を表示する方法
こちらの質問に関しましては
上記(1)を一部利用します。
TRタグから対象となるTDタグを参照します。

具体例
**********
<html>
<head>
<title>rowIndex test</title>
<script type="text/javascript">
<!--
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();

function insertToday(inputElement){
inputElement.parentNode.parentNode.childNodes[1].innerHTML=y+"/"+m+"/"+d;
}
//-->
</script>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td style="width:100px">
<input type="button" value="zero" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
<tr>
<td style="width:100px">
<input type="button" value="one" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
</table>
</body>
</html>
**********

少々説明を致します。
childNode[n]・・・そのタグのn番目の子のタグを参照します。
nは、IEでは0から、Firefoxでは1からです。
このソースではchildNodes[1]となっているため、IEでは左から2セル目に格納されます。
Firefoxでは一番左のセルに格納されます。(ボタンは消えます)

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピ...続きを読む

QJavaScriptで、テーブルクリックした時の

PHPを勉強中です。
どうしてもJavaScriptの力を借りなければならず、少し頑張ってみましたがお手上げですのでどなたかご教授ください。

画面に社員マスタテーブル['tbl_A]があります。
【イメージ】
社員ID  | 社員名  | 住所  |
  1      東京花子   港区~
  3      板橋亜希   板橋区~
  8      瀬田 南    世田谷区~


名前や住所をクリックしたときに、その人の社員IDを取得したいのです。
クリックしたセル自体の情報は色々ネットで調べて取得できたのですが、クリックした行の[社員ID]が欲しいのです。

ちなみに、クリックしたセルの情報はweb上から似たような処理のものを探してきて
下記のようにしてます。
現在の私は、解読はできますが、自分ではこれは作れないレベルです。

こちらに手を加える形か、まったく別物でも構いませんのでよろしくおねがいします。

function getCELL() {
var myTbl = document.getElementById('tbl_A');

// trをループ。rowsコレクションで,行位置取得。
for (var iL=0; iL < myTbl.rows.length; iL++) {
// tr内のtdをループ。cellsコレクションで行内セル位置取得。
for (var iC=0; iC<myTbl.rows[iL].cells.length; iC++) {
var Cells=myTbl.rows[iL].cells[iC]; //iL番行のiC番列のセル "td"
// onclickで 'Mclk'を実行。thisはクリックしたセル"td"のオブジェクトを返す。
Cells.onclick = function(){Mclk(this);}
}
}
}
function Mclk(Cell) {
var rowINX = '行位置:'+Cell.parentNode.rowIndex;//Cellの親ノード'tr'の行位置
var cellINX = 'セル位置:'+Cell.cellIndex;
var cellVal = 'セルの内容:'+Cell.innerHTML;

//取得した値の書き出し
res=rowINX + ' '+ cellINX + ' ' + cellVal;
document.getElementById('hoge').value=res;
}

PHPを勉強中です。
どうしてもJavaScriptの力を借りなければならず、少し頑張ってみましたがお手上げですのでどなたかご教授ください。

画面に社員マスタテーブル['tbl_A]があります。
【イメージ】
社員ID  | 社員名  | 住所  |
  1      東京花子   港区~
  3      板橋亜希   板橋区~
  8      瀬田 南    世田谷区~


名前や住所をクリックしたときに、その人の社員IDを取得したいのです。
クリックしたセル自体の情報は色々ネットで調べて取得できたので...続きを読む

Aベストアンサー

自分の行の先頭のセルの値を拾いたいということでよろしいですか?

こんなかんじでどうでしょ?
<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //基本
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="TD"){
var uid=t.parentNode.firstChild.innerHTML;
alert(uid);
}
}

</script>
<table>
<thead>
<tr><th>社員ID</th><th>社員名</th><th>住所</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>東京花子</td><td>港区~</td></tr>
<tr><td>2</td><td>板橋亜希</td><td>板橋区~</td></tr>
<tr><td>3</td><td>瀬田 南</td><td>世田谷区~</td></tr>
</tbody>
</table>

自分の行の先頭のセルの値を拾いたいということでよろしいですか?

こんなかんじでどうでしょ?
<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //基本
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="TD"){
var uid=t.parentNode.firstChild.innerHTML;
alert(uid);
}
}

</script>
<table>
<thead>
<tr><th>社員ID</th><th>社員名</th><th>...続きを読む

Qクリックされた罫表セルの行番号、列番号を取得するには

クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。

例えば 下記Tableの"き"という文字が入ったセルをクリックすると
列番号:2 行番号:3 という番号を取得したいのです。

<table>
<thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
<tbody>
<tr td>あ</td><td>い</td><td>う</td><td>え</td></tr>
<tr><td>お</td><td>か</td><td>き</td><td>く</td></tr>
<tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr>
<tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr>
</tbody>
</table>

onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の
列数、行数を取得する事は可能でしょうか。

宜しくお願いします。

クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。

例えば 下記Tableの"き"という文字が入ったセルをクリックすると
列番号:2 行番号:3 という番号を取得したいのです。

<table>
<thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
<tbody>
<tr td>あ</td><td>い</td><td>う</td><td>え</td></tr>
<tr><td>お</td><td>か</td><td>き</td><td>く</td></tr>
<tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr>
<tr><td>す</td><td>せ</td><td>そ<...続きを読む

Aベストアンサー

たとえばこんな感じでsiblingなノードを数えてみるとか・・・

<script>
window.onload=function(){
var t0=document.getElementById("t0");
var tds=t0.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].onclick=function(){
var n=this.previousSibling;
var col=1;
while(n){
if(n.nodeName=="TD")col++;
n=n.previousSibling;
}
var n=this.parentNode.previousSibling;
var row=1;
while(n){
if(n.nodeName=="TR") row++;
n=n.previousSibling;
}
alert("列番号:"+col.toString()+" 行番号:"+row.toString())
}
}
}
</script>
<table id="t0">
<thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
<tbody>
<tr><td>あ</td><td>い</td><td>う</td><td>え</td></tr>
<tr><td>お</td><td>か</td><td>き</td><td>く</td></tr>
<tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr>
<tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr>
</tbody>
</table>

たとえばこんな感じでsiblingなノードを数えてみるとか・・・

<script>
window.onload=function(){
var t0=document.getElementById("t0");
var tds=t0.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].onclick=function(){
var n=this.previousSibling;
var col=1;
while(n){
if(n.nodeName=="TD")col++;
n=n.previousSibling;
}
var n=this.parentNode.previousSibling;
var row=1;
while(n){
if(n.nodeName=="TR") row++;
n...続きを読む

Q特定内の
の色を変える

お世話になります。
特定<table>内の<td>の色を変える
<table id="abc">
<tr>
<td>あああああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
</table>
<table>にはidを定義します。
その<td>タグにはidを定義していません。
このとき、あああああ、いいい、うううの表示色を
<input type="button" value="色を変える" onClick="ChngColor()">

なんてことで、
マウスをクリックすることにより変更できないものでしょうか。
よろしくお願いいたします。

Aベストアンサー

#1さんへの補足より――

> functio ChngColor(){
> var Obj=document.getElementById('abc');
> Obj=document.getElementsByTagName("td");
> for (var i=0;i<Obj.length;i++){
> Obj.style.color="red";
> }
> }

特に3行目がいけない。こう変えましょう。
(あと、詰めすぎは見づらいので、適当に空白を入れました)

function ChngColor() {
var Obj1 = document.getElementById('abc');
var Obj2 = Obj1.getElementsByTagName("td");
for (var i = 0; i < Obj2.length; i++) {
Obj2[i].style.color = "red";
}
}

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

QJQueryでクリックされた文字を取得したい

テーブルがあり、連番が 1 2 3 と振ってあります。
その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか?

例)1をクリック → 1 を取得。


<table border="1" width="150">
<tbody>
<tr>
<td width="50"><a href="#">1</a></td>
<td>田中</td>
</tr>
<tr>
<td><a href="#">2</a></td>
<td>佐藤</td>
</tr>
<tr>
<td><a href="#">3</a></td>
<td>鈴木</td>
</tr>
</tbody>
</table>

ご存知の方教えて下さい。

Aベストアンサー

#2です。
一応全部書いたサンプル。
(アンカーは不要に感じたので、1列目のセルという感じで指定してます)

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#table1 td:first-child').click(function(){
alert( $(this).text() );
});
});
</script>

</head>
<body>


<table border="1" width="150" id="table1">
<tbody>
<tr>
<td width="50">1</td>
<td>田中</td>
</tr>
<tr>
<td>2</td>
<td>佐藤</td>
</tr>
<tr>
<td>3</td>
<td>鈴木</td>
</tr>
</tbody>
</table>

</body>
</html>

#2です。
一応全部書いたサンプル。
(アンカーは不要に感じたので、1列目のセルという感じで指定してます)

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#table1 td:first-child').click(function(){
alert( $(this).text() );
});
});
</script>

</head>
<body>


<table border="1" width="150" id="table1">
<tbody>
<tr>
<td width="50">1</td>
<td>田中</td>
</tr>
<tr>
<td>...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qjavascriptでクリックするごとにセルの色を変えたい

javascript初心者です。
現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。

現在下記のように作っていますがエラーが起きてしまいます。
どのように直せばよいかご教授願います。

<script type="text/javascript">
<!--
var color1 = "#ff0000";
var color2 = "#0000ff";

function onC(obj){
if (obj.style.backgroundColor = color1){
obj.style.backgroundColor = color2;
}
else if (obj.style.backgroundColor = color2){
obj.style.backgroundColor = color1;
}
}
//-->
</script>
<body>
<table border="1" cellpadding=20>
<tr>
<td onClick = "onC(this)"><br>
</td>
</tr>
</table>
</body>

javascript初心者です。
現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。

現在下記のように作っていますがエラーが起きてしまいます。
どのように直せばよいかご教授願います。

<script type="text/javascript">
<!--
var color1 = "#ff0000";
var color2 = "#0000ff";

function onC(obj){
if (obj.style.backgroundColor = color1){
o...続きを読む

Aベストアンサー

styleのbackgroundColorは
<td style="background-color:~">
みたいな記述がなければ
"style"も"backgroundColor"も存在しないのでいきなり比較はできない。
(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。)

標準的なブラウザならgetComputedStyle、IEならcurrentStyleで結果的にどう設定されているかを読み出す事はできるけど、ちょっと面倒なのでここではパス。

とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。
ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。

というわけで以下サンプル。
<html>
<head>
<title></title>
<style type="text/css">
td{background-color:#0000ff}
</style>
<script type="text/javascript">
function bgSwap(TD) {
if(TD.style && TD.style.backgroundColor)
TD.style.backgroundColor = '';
else
TD.style.backgroundColor = '#ff0000';
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="bgSwap(this)">セル1</td>
<td onclick="bgSwap(this)">セル2</td>
</tr>
</table>
</body>
</html>

styleのbackgroundColorは
<td style="background-color:~">
みたいな記述がなければ
"style"も"backgroundColor"も存在しないのでいきなり比較はできない。
(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。)

標準的なブラウザならgetComputedStyle、IEならcurrentStyleで結果的にどう設定されているかを読み出す事はできるけど、ちょっと面倒なのでここではパス。

とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。
つい...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング