以下のようなテーブル行に付けたすごく長いJavascriptを
class="line_color" のようにCSS等にまとめて
記述する方法はあるでしょうか?
■現在
<tr onmouseover="setPointer(this, 0, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 0, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 0, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');">
<td>テスト</td>
</tr>
■理想
<tr class="line_color"><td>テスト</td></tr>
No.2ベストアンサー
- 回答日時:
どこかで見たような気がしたらphpMyAdminですね
IE限定でしたら以下の感じでいけそうです。
(FFではphpMyAdmin自体は動くのですが、このソース
は動かないですね・・・まぁもうちょい調べます)
ちなみに、phpMyAdminは行ごとに色換えしている
ので、一行おきにclass名をかえるか、分岐処理で
色がえした方がよいかもしれませんね
<script language="JavaScript">
function onloadFunc(){
var allTags = document.getElementsByTagName('tr');
for (var i =0;i<allTags.length;i++){
if(allTags[i].className=="line_color"){
allTags[i].number =i;
allTags[i].onmouseover =function(){setPointer(this, this.number,'over', '#DDDDDD','#CCFFCC','#FFCC99');};
allTags[i].onmouseout= function(){setPointer(this, this.number,'out', '#DDDDDD','#CCFFCC','#FFCC99');}
allTags[i].onmousedown= function(){setPointer(this, this.number,'click','#DDDDDD','#CCFFCC','#FFCC99');}
}
}
}
</script>
</head>
<body onLoad="onloadFunc()">
<table>
<tr class="line_color"><td>テスト</td></tr>
<tr class="line_color"><td>テスト</td></tr>
<tr class="line_color"><td>テスト</td></tr>
</table>
</body>
No.1
- 回答日時:
setPointer関数がどんなものかわからないのでなんとも
いえませんが、以下のような様式でいかがでしょうか?
<html>
<head>
<script language="javascript">
function onloadFunc(){
var allTags = document.getElementsByTagName('*');
for (var i =0;i<allTags.length;i++){
if(allTags[i].className=="line_color"){
allTags[i].onmouseover=function(){setPointer(this, 0, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');}
allTags[i].onmouseout=function(){setPointer(this, 0, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');}
allTags[i].onmousedown=function(){setPointer(this, 0, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');}
}
}
}
</script>
</head>
<body onLoad="onloadFunc()">
<table>
<tr class="line_color"><td>テスト</td></tr>
</table>
</body>
</html>
setPointer関数はphpMyAdminというフリーソフトにあるjavascriptの関数で長くて貼り付けられそうませんでした。行に色を塗ったり塗らなかったりします。
教えていたただいた方法で
1.getElementsByTagName('*')の*をtrに
2.this, 0,をthis, i,
3.下記のようにHTMLを3行に
<tr class="line_color"><td>テスト</td></tr>
<tr class="line_color"><td>テスト</td></tr>
<tr class="line_color"><td>テスト</td></tr>
してみましたのですが、
クリックした行がオレンジ色に変わるのですが、
最初にクリックした行しか色が変わりませんでした。惜しいです。
でも、こういう書き方があるんだというのことが
わかっただけでも大変参考になりました。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Perl PERL 1 2022/04/26 14:15
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
jqueryとscriptでTABLEのセルを...
-
VB.NET
-
特定<table>内の<td>の色を変える
-
ブルダウン選択でページの表示...
-
テーブルの項目の値取得
-
ラジオボタンとセルの連動
-
特定タグの文字を抽出するには
-
JavaScriptで特定のtdタグにcla...
-
一覧から選択した行の行番号を...
-
firefoxでchildNodesの代用
-
javascriptを短く方法ありますか?
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報