以下のjavascriptのhoge1を実行すると
テーブルの1行目が消えます
hoge1を実行した後hoge2を実行すると1行目も2行目も両方消えてしまいます
hoge1を実行した後hoge2を実行しても2行目だけ消えて欲しいのですが
その場合hoge2に今までのjavascriptを無効化するコードを追加しないといけないと思うのですが
無効化するコードを教えて下さい
function hoge1() {
var c = document.querySelectorAll("td:nth-child(1)");
for (var d = 0; d < c.length; d++) {
c[d].style.display = "none"
}
};
function hoge2() {
var c = document.querySelectorAll("td:nth-child(2)");
for (var d = 0; d < c.length; d++) {
c[d].style.display = "none"
}
};
No.1
19
7
300pt
すでにrouge_2008さんがコメントされていて、私もそのとおりだと思いますが、スタイルシートのルールを直接書き換えるという方法もあります。
<style>
/* これが0番目のstyle要素だとする。 */
td:nth-child(1) { display: table-cell; }
td:nth-child(2) { display: table-cell; }
</style>
<script>
function hoge1() {
var rules = document.getElementsByTagName('style')[0].sheet.cssRules;
rules[0].style.cssText = 'display: none';
rules[1].style.cssText = 'display: table-cell';
}
function hoge2() {
var rules = document.getElementsByTagName('style')[0].sheet.cssRules;
rules[0].style.cssText = 'display: table-cell';
rules[1].style.cssText = 'display: none';
}
</script>
240
228
2
1
1
コメント（1件)
var c = document.querySelectorAll("td:nth-child(1)");
for (var d = 0; d < c.length; d++) {
c[d].style.display = "table-cell"
}