テーブルには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>
初心者丸出しで申し訳有りませんが宜しくお願いします。
No.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要素を取得するようにしてください。
fujillin様。昨晩からお付き合い頂き誠にありがとうございました。
コードの方は_pipi_様からのご回答で解決いたしました。
しかし、fujillin様のご回答も大変参考になり感謝いたします。
実は、PHPの勉強中にjavascriptの問題にぶち当たり、中途半端なまま取り組んでいるため、ちぐはぐな状態だと思います。
ご提示いただいたソースを参考に今後も勉強してまいります。
ありがとうございました。
No.7ベストアンサー
- 回答日時:
<!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>
No.6
- 回答日時:
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円をテキストボックスに表示→これは分かります
何度も質問しまして大変申し訳ありません。
お手数でなければ宜しくお願いします。
No.5
- 回答日時:
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>
度々すみませんが宜しくお願いします
No.4
- 回答日時:
<!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>をクリックしたタイミングに出来ませんでしょうか?
No.3
- 回答日時:
No.2
- 回答日時:
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月まで順番にあるとは限りません。動的に追加して
います。
この為、テーブルから直接値を取得し、セレクトボックス内を検索?して
から、選択しなければいけないのかなと考えています。
お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。
No.1
- 回答日時:
提示ソースでもうまく動く気がするが・・・。
こんなのはどうですか
function getCell(obj){
document.getElementById("text1").selectedIndex = obj-1;
}
この回答への補足
ご回答ありがとうございます。
申し訳有りません。質問の仕方が悪かったです。
テーブルの値は、1月~12月まで順番にあるとは限りません。動的に追加して
います。
この為、テーブルから直接値を取得し、セレクトボックス内を検索?して
から、選択しなければいけないのかなと考えています。
お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
javascript でテーブル操作
-
クリックごとに文字色が交互に...
-
【jQuery】tableループ内のIDの...
-
javascriptでクリックするごと...
-
return trueとreturn falseの用...
-
プルダウンで選択すると、DBの...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
-
1つのform内に2つのsubmitボタ...
-
VB.NET DateTimeの型について
-
<input>の選択肢をプルダウンメ...
-
チェックボックスのON/OFFに応...
-
オフになっているチェックボッ...
-
submitボタンを表示することな...
-
クリックさせたいが、click()が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
javascriptで文字を拡大・縮小...
-
tbody要素のinnerHTMLが書き換...
-
テキストエリアに入力した改行...
-
idの振り直しについて
-
【jQuery】tableループ内のIDの...
-
javascriptで<table>背景色の取得
-
テーブルの行数を可変長にした...
-
javascriptで画像をテーブルに...
-
テーブルのセルのクリック時、...
-
Javascriptでテーブルタグの座...
-
Table内TDの子要素を移動させた...
-
javascriptでクリックするごと...
-
別窓で画像を表示する場合に余...
-
外部のデータファイルの読み込...
-
クリックごとに文字色が交互に...
-
DIVで同一ページ内にポップアッ...
-
innerHTMLでのテーブル作成
-
javascriptで画像の移動
おすすめ情報
