重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

テーブルには1月~12月までの値があり、セレクトボックスにも1月~12月の項目があります。

この様な場合で、テーブルの4月をクリックした場合、セレクトボックスの4月を選択状態にしたいです。

テーブルの値を取得し、テキストボックスに表示する事は出来ましたが、セレクトボックスの場合はさっぱり分かりません。宜しければご教授下さい。
下記は別のサイト様を参考にテスト中の物ですが、テキストボックスには可能ですが、セレクトボックスでは表示されません。
<SCRIPT TYPE="text/javascript">
<!--
function getCell(obj){
document.getElementById("text1").value = document.getElementById("td"+obj + "a").textContent;
}
// -->
</SCRIPT>

</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr id="tr0" onclick="getCell('1')">
<td id="td1a">1月</td>
</tr>
<tr id="tr0" onclick="getCell('2')">
<td id="td2a">2月</td>
</tr>
  <tr id="tr0" onclick="getCell('3')">
<td id="td3a">2月</td>
</tr>
  省略
</table>
 <select id="text1">
<option>1月</option>
<option>2月</option>
<option>3月</optio>
    省略
</select>

初心者丸出しで申し訳有りませんが宜しくお願いします。

A 回答 (10件)

No5です


>テーブルの行(<tr>)を選択した場合に~
それなら、テーブル全体をヒットさせて(元の通り)で、行の先頭のtdを取得すればいいのでは? No6と同様の操作で可能です。

つぎはぎにさらにつぎ当てだけど…

function test(evt){
var elm = evt.srcElement || evt.target;
if (elm.nodeName=='TD') {
elm = elm.parentNode.firstChild;
alert(elm.innerHTML);
var txt = elm.innerHTML;
var elm = document.getElementById('text1');
for (var i=0; i<elm.options.length; i++){
if (elm.options[i].text==txt) {elm.selectedIndex = i; break;}
}
}
}

>100円をテキストボックスに表示→これは分かります
がわかるなら、わかると思いますが・・・?
No9様がおっしゃっている、<td>の中に他のタグがある場合の処理は行っていませんので、そのような場合は、親要素を遡って、TRの最初のTD要素を取得するようにしてください。
    • good
    • 0
この回答へのお礼

fujillin様。昨晩からお付き合い頂き誠にありがとうございました。
コードの方は_pipi_様からのご回答で解決いたしました。
しかし、fujillin様のご回答も大変参考になり感謝いたします。

実は、PHPの勉強中にjavascriptの問題にぶち当たり、中途半端なまま取り組んでいるため、ちぐはぐな状態だと思います。

ご提示いただいたソースを参考に今後も勉強してまいります。
ありがとうございました。

お礼日時:2009/03/12 09:39

さらにミスった。

<input>はブロック要素で囲んでくれ!
innerHTMLだと<td>の中に、他のタグは使えない。
    • good
    • 0
この回答へのお礼

何度もご回答頂きありがとう御座います。更にコードまで提示していただき
誠に感謝したします。

期待通りそのままの動作が出来ました。
正直、コードの理解は出来ていませんがこれから少しずつ勉強もして参ります。

この度は誠に勝手なお願いにお付き合いいただきましてありがとうございました。

お礼日時:2009/03/12 09:31

if (!(e.tagName == 'TD' || e.tagName == 'TH')) return;


いらねぇがも。
    • good
    • 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>set select?</title>

<table border="1" id="tb0">
<tr><td>1月</td><td>100円</td></tr>
<tr><td>2月</td><td>200円</td></tr>
<tr><td>3月</td><td>300円</td></tr>
</table>

<select id="text1">
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<input type="text" id="text2">
<script type="text/javascript">

//@cc_on
//全角空白は、タブまたは半角空白に変換のこと

document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click',
 function (evt) {
  var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/;
  var t = 'tb0';
  var text;
  var c;

  if (!(e.tagName == 'TD' || e.tagName == 'TH')) return;
  if (!getParentById(e, t)) return;

  c = e.parentNode.childNodes;
  setSelectByText('text1', getText(c[0]));
  document.getElementById('text2').value = getText(c[1]);
 },false
);

function setSelectByText (eId, val) {
 var s = document.getElementById(eId).options;
 var cnt = 0;
 var f = false;
 var o;

 while (o = s[cnt++]) if (o.text == val) o.selected = f = true;
 return f;
}

function getParentById (e, eId){
 while (e) if (e.id == eId) return e; else e = e.parentNode;
 return null;
}

function getText (e) {
 return e./*@if (1) innerText @else@*/ textContent /*@end@*/;
}

</script>
    • good
    • 0

No5です。



>1列目をセレクトボックスに2列目をテキストボックスに表示する予定です。
No5にも書きましたが、該当するものがない場合は何もしないので、とりあえず、今のままでも動作すると思いますが・・?
まぁ、2列目、3列目・・・に「2月」などの表記があれば、それにも反応してしまうことになりますが…

とは言っても、正しい(予定通りの)動作ではないのもしゃくなので、1列目だったらという判断を追加しました。
(考え方を変えて作るのも面倒なので、No5につぎはぎの形で追加)
function testの部分だけ入れ替えてください。

function test(evt){
var elm = evt.srcElement || evt.target;
if ((elm.nodeName=='TD') && (!elm.previousSibling)){
var txt = elm.innerHTML;
var elm = document.getElementById('text1');
for (var i=0; i<elm.options.length; i++){
if (elm.options[i].text==txt) {elm.selectedIndex = i; break;}
}
}
}

この回答への補足

何度もご回答いただきありがとうございます。

説明がへたで本当にすみません。
私が望む動作は、テーブルの項目(<td>)毎ではなく、テーブルの行(<tr>)を選択した場合に各項目をセレクトボックスで選択させたいのです。

--------------
1月 100円
--------------
2月 200円
--------------
上記のテーブルで1行目(<tr>)を選択した場合
セレクトボックスに1月を選択。→分からない部分
100円をテキストボックスに表示→これは分かります

何度も質問しまして大変申し訳ありません。
お手数でなければ宜しくお願いします。

補足日時:2009/03/11 22:49
    • good
    • 0

document.getElementById("text1").value =○○ だとセレクト状態にはならないみたい。



>テーブルの値は、1月~12月まで順番にあるとは限りません。
>動的に追加しています。
optionsを検索してあったら表示、無ければなにもしない、でいいのかな?
あるいは、無いときは値を追加するのでしょうか?

とりあえず前者のケース。(追加するのはわかっているみたいなので、必要ならアレンジしてください。)
table内の全てがクリックの対象なのか、一部だけなのかわかりませんでしたが、これもとりあえず、全部が対象と仮定してテーブルをクリックしたらイベント発生とした場合の例。

<html>
<head>
<SCRIPT TYPE="text/javascript">
<!--
window.onload = function(){
var t=document.getElementById('table1');
if(window.addEventListener){
t.addEventListener('click', test, false);
}else if(window.attachEvent){
t.attachEvent('onclick', test);
}
}
function test(evt){
var elm = evt.srcElement || evt.target;
if (elm.nodeName=='TD'){
var txt = elm.innerHTML;
var elm = document.getElementById('text1');
for (var i=0; i<elm.options.length; i++){
if (elm.options[i].text==txt) {elm.selectedIndex=i; break;}
}
}
}
// -->
</SCRIPT>

</head>
<body>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr><td>1月</td></tr>
<tr><td>2月</td></tr>
<tr><td>3月</td></tr>
<tr><td>4月</td></tr>
<tr><td>5月</td></tr>
</table>

<select id="text1">
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
</body>
</html>

この回答への補足

ご回答ありがとうございます。
ほぼ期待どおりの動作をしましたが、動作を<tr>をクリック
した場合にしたいです。(実際にはその他いくつかの項目があります)
id="tb0"を<tr>にしてみましたがだめでした。

動作のタイミングを<tr>をクリックしたタイミングに出来ませんでしょうか?
実際には下記の様に複数の項目があり、1列目をセレクトボックスに2列目
をテキストボックスに表示する予定です。
<tr><td>1月</td><td>100円</td></tr>
<tr><td>2月</td><td>500円</td></tr>
<tr><td>3月</td><td>600円</td></tr>
度々すみませんが宜しくお願いします

補足日時:2009/03/11 22:15
    • good
    • 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>set select?</title>

<table border="1" id="tb0">
<tr><td>1月</td></tr>
<tr><td>2月</td></tr>
<tr><td>3月</td></tr>
</table>

<select id="text1">
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>

<script type="text/javascript">
//@cc_on
document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function (evt) {
var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/;
var t = 'tb0';
var text;

if (!(e.tagName == 'TD' || e.tagName == 'TH')) return;
if (!getParentById(e, t)) return;
text = e./*@if (1) innerText @else@*/ textContent /*@end@*/;

setSelectByText('text1', text);

}, false);

function setSelectByText(eId, val) {
var s = document.getElementById(eId).options;
var cnt = 0;
var f = false;
var o;

while (o = s[cnt++]) if (o.text == val) o.selected = f = true;
return f;
}

function getParentById(e, eId){
while (e) if (e.id == eId) return e; else e = e.parentNode;
return null;
}
</script>

この回答への補足

ご回答ありがとうございます。
ほぼ期待どおりの動作をしましたが、動作を<tr>をクリック
した場合にしたいです。(実際にはその他いくつかの項目があります)
id="tb0"を<tr>にしてみましたがだめでした。

動作のタイミングを<tr>をクリックしたタイミングに出来ませんでしょうか?

補足日時:2009/03/11 22:06
    • good
    • 0

optionのvaluesを渡してあげる方法でどうでしょう?



参考URLに似たものがあったので、載せておきますね。

参考URL:http://okwave.jp/qa558370.html

この回答への補足

参考URLありがとうございます。
リンク先を確認しましたが、勉強不足のため期待した動作が出来ませんでした。ありがとうございます

補足日時:2009/03/11 22:05
    • good
    • 0

document.getElementById("text1").value = document.getElementById("td"+obj + "a").textContent;



この部分を

document.getElementById("text1").options[(obj-1)].selected = true;

でどうでしょう?

objを-1をしてるのは、optionsは0から始まるので、
1月の場合は、0だからです。

この回答への補足

ご回答ありがとうございます。

申し訳有りません。質問の仕方が悪かったです。
テーブルの値は、1月~12月まで順番にあるとは限りません。動的に追加して
います。

この為、テーブルから直接値を取得し、セレクトボックス内を検索?して
から、選択しなければいけないのかなと考えています。

お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。

補足日時:2009/03/11 18:03
    • good
    • 0

提示ソースでもうまく動く気がするが・・・。



こんなのはどうですか
function getCell(obj){
document.getElementById("text1").selectedIndex = obj-1;
}

この回答への補足

ご回答ありがとうございます。

申し訳有りません。質問の仕方が悪かったです。
テーブルの値は、1月~12月まで順番にあるとは限りません。動的に追加して
います。

この為、テーブルから直接値を取得し、セレクトボックス内を検索?して
から、選択しなければいけないのかなと考えています。

お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。

補足日時:2009/03/11 17:56
    • good
    • 0

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