tableの各セルに同じ関数を対応させたい

Question

いつもお世話になっております。今回はテーブルの各セルに同じ関数を対応させたいのですがいい方法が思い浮かばなかったので、そこをお聞きしたいです。 function swap(TD) { 　if(TD.style && TD.style.backgroundColor) 　{ 　　TD.style.backgroundColor = ''; 　} 　else 　{ 　　TD.style.backgroundColor = '#ff0000'; 　} } (略) swapという関数はセルの色を白と赤に交互に変えるものですが、ここにセルが白なら0を、赤なら1を各テキストに入れるという処理を加えたいです。しかしながらnameがちょっと違うので一つ一つ関数を作らなくてはいけないのかと思っています。 nameのxxxの部分は共通で、お尻の数字が変わっていきます。この規則性を使って何とかうまい方法はありませんでしょうか？ご教授お願いします。

urecy · Accepted Answer

テストをしている最中に、テキストの内容が type「hidden」ではみえなかったのでとりあえずtextにしてやってみました。全部のTDたぐに　onclick=" swap(this);" を書くのはめんどくさいかな？と思ったので勝手にgetElementsByTagNameで、すべてのTDたぐに、swap関数をあてはめちゃってます。このまま、コピー＆貼り付けをしていただければ。 hidden（今は type="text"ですが）のinputタグのvalueに、1と0が入っている様子が確認していただけると思います。質問者様の要望と違う回答でしたらすみません。

urecy · Answer

No.5です

私が書き込みしたプログラムの
inputタグのname属性に　xxx01、xxx02、xxx03とそのままのこしてありますが。
それぞれのTDタグの、一番初めの子供の要素（firstChild）として
それぞれのinputタグを参照しているので
name属性は消去しても、問題なく動作します。

あと、セルが白なら0、赤なら１にしたい！とのことでしたが
0と1を逆にしてしまったようです。
td.firstChild.value = 0;　
この行の０を１に、もうひとつは１を０にしていただければＯＫなはずです。

OKbokuzyo · Answer

No1です。
たびたび失礼します。

Name属性に連番を与える場合に使用した関数の別回答です。
eval関数を使用してもおｋです。

　function changeValue(Num,TD){
　　var tblObj = document.getElementById("target");
　　var TDs = tblObj.getElementsByTagName("td");
　　var INPUTs = tblObj.getElementsByTagName("input");
　　//何番目のTDがクリックされたか
　　for(var i = 0;i<TDs.length;i++){
　　　if(TDs[i] == TD){
　　　　//indexは0から始まるので1追加
　　　　i++;
　　　　break;
　　　}
　　}
　　var str = "f." + "xxx" + "0" + i + ".value = Num;"
　　eval(str);
　}

OKbokuzyo · Answer

No1です。

>>if文でやれるとのことでしたが、今回はこのようなものが1000個くらいあるので

質問文に書かれているswap関数のif文のことを言っているのですが‥？
具体的に言えば

function swap(TD){
　if(TD.style && TD.style.backgroundColor){
　　TD.style.backgroundColor = '';
　　TD.firstChild.value = 0;
　}else{
　　TD.style.backgroundColor = '#ff0000';
　　TD.firstChild.value = 1;
　}
}

こんなカンジです。
TDタグに文字を入れるつもりならfirstChildの代わりにlastChildも使えますし
firstChild.nextSiblingとかも使えます。

↓のようにTDタグからINPUTタグを取ってもいいと思います。
function swap(TD){
　var INPUTs = TD.getElementsByTagName("input");
　if(TD.style && TD.style.backgroundColor){
　　TD.style.backgroundColor = '';
　　INPUTs[0].value = 0;
　}else{
　　TD.style.backgroundColor = '#ff0000';
　　INPUTs[0].value = 1;
　}
}

Name属性に連番を与えてやりたい場合の例としては

　function swap(TD){
　　if(TD.style && TD.style.backgroundColor){
　　　TD.style.backgroundColor = '';
　　　changeValue(0,TD);
　　}else{
　　　TD.style.backgroundColor = '#ff0000';
　　　changeValue(1,TD);
　　}
　}

　function changeValue(Num,TD){
　　var tblObj = document.getElementById("target");
　　var TDs = tblObj.getElementsByTagName("td");
　　var INPUTs = tblObj.getElementsByTagName("input");
　　//何番目のTDがクリックされたか
　　for(var i = 0;i<TDs.length;i++){
　　　if(TDs[i] == TD){
　　　　//indexは0から始まるので1追加
　　　　i++;
　　　　break;
　　　}
　　}
　　for(var j = 0;j<INPUTs.length;j++){
　　　//ゼロ埋めはJavaScriptに実装されていないので別途関数が必要
　　　//今回はとりあえずゼロ埋めはせずにテキトーに
　　　if (INPUTs[j].name == "xxx" + "0" + i){
　　　　INPUTs[j].value = Num;
　　　　break;
　　　}
　　}
　}

あんまりスマートとは言い難いですがこんなカンジですかね。

まぁ、質問文のソースは簡単に切り出しただけかと思いますので
上記などを参考に自分に合った方法をご検討ください。

steel_gray · Answer

swap関数でinputに辿りつく方法
TD.getElementsByTagName('input')[0]
- TD配下のINPUTの配列の#0
TD.firstChild
- TDの最初の子要素(※1)

inputのnameを導く方法
テーブル全体の構成がわからないのですがカラムや行を得る事ができれば算出できる？
TD.cellIndex
- 何番目のカラムか得る
TD.parentNode.rowIndex
- 親(TR)が何行目か得る


※1 IE以外では改行文字なんかもテキストノードとして存在するので
<td>
<input～
みたいにソース上で改行しているとfirstChildはテキストノードになるので注意が必要

OKbokuzyo · Answer

例文だけで考えれば TD.firstChild.value = 1 のような記述をif文に加えれば良いと思うのですが。あるいは、

var tblObj = document.getElementById("target"); var TDs = tblObj.getElementsByTagName("td"); とすればインデックス値をうまく利用してできなくはないですけどね。どういう使い方をされるのか分からないので、本当に参考までですが

tableの各セルに同じ関数を対応させたい

<html>

No.5です

No1です。

No1です。

swap関数でinputに辿りつく方法

例文だけで考えれば

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング