下に書かれているjavascriptは縦6マス・横7マスで一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1~30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを表示することができますが、この状態だとsun・5・12・19・26とそれらが書き込まれたマスが赤くなってしまいます。sun・5・12・19・26だけを赤くさせるにはどうすればいいとおもいますか?
<!DOCTYPE html>
<html lang="java">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<script>
var youbi = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
var table=document.createElement("table");
table.setAttribute("border",1);
var tbody=document.createElement("tbody");
for(var i=0;i<6;i++){
var tr=document.createElement("tr");
for(var j=0;j<7;j++){
var td=document.createElement("td");
if (i == 0) {
var txt=youbi[j];
} else {
var txt=(i-1)*7+j-2;
if (txt < 1 || txt > 30) {
txt = "";
}
}
td.appendChild(document.createTextNode(txt));
if (j == 0) {
td.style.color='red';
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.getElementsByTagName("body")[0].appendChild(table);
</script>
</body>
</html>
No.3ベストアンサー
- 回答日時:
----- ここから -----------
td.appendChild(document.createTextNode(txt));
if (j == 0) {
td.style.color='red';
}
tr.appendChild(td);
----- ここまでを -----------
----- ここから -----------
var oDiv=document.createElement("div");
oDiv.appendChild(document.createTextNode(txt));
if (j == 0) {
oDiv.style.color='red';
}
td.appendChild(oDiv);
tr.appendChild(td);
----- ここへ差替え -----------
No.2
- 回答日時:
<td> の下にもう一段 <span> を差し込み、style の範囲を狭める
var word = document.createElement('span');
word.appendChild(document.createTextNode(txt));
word.style.color = 'red';
td.appendChild(word);
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- C言語・C++・C# C言語の質問です HTMLでこのようなコードを書いたのですがそれをC言語で同じように書きたいです < 1 2022/08/11 23:38
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
Tableの枠線(内・外)色を変更
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
プルダウンメニューを表の中に...
-
JQueryでテーブルの行を追加し...
-
Javascriptでテーブルタグの座...
-
javascriptでカレンダーを作る
-
javascriptで画像をテーブルに...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
hiddenのvalueの値を変えたい
-
ラジオボタンにタブインデック...
-
value内に変数を入れたい
-
一覧から選択した行の行番号を...
-
【jQuery】input nameの文字列...
-
VBAをJavaScriptに変換したいです
-
onchangeイベントを強制的に発...
-
javaScriptの変数をJavaの変数...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
JQueryでテーブルの行を追加し...
-
javascriptで画像をテーブルに...
-
クリックごとに文字色が交互に...
-
カレンダーに印を付けたい
-
任意に文字数指定のできる原稿...
-
idの振り直しについて
-
tbody要素のinnerHTMLが書き換...
-
複数画像のロールオーバー
-
指定のテキストをクリックする...
-
マウスが重なったら画像の上に...
-
jQueryでの親の親の隣の子供の...
-
JavaScript 保守性の高めたい 2
-
Javascriptでの開閉リストの質問
おすすめ情報