//Javascript
function changeCell(){
if(document.form1.check_type.checked == true){
document.getElementById("noneLine").style.visibility = "hidden";
}else{
document.getElementById("noneLine").style.visibility = "";
}
}
//切替チェックボックス
<input name="check_type" type="checkbox" onclick="changeCell();">
//適応箇所
<table border="1">
<tr>
<th>あああ</th>
<th>いいい</th>
<th id="noneLine">ううう</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
上記のテーブルは2行ですが、PHPで出力しますので、一定行まで下に増えていきます。
上記のJavascriptだと、見出しの「ううう」のセルは表示・非表示ができるのですが、その下の行は表示されます。
どういう風にしたら行の部分も非表示に出来るのでしょうか？
No.2
203
20
100pt
下記のような感じでどうでしょう。
119
114
// Javascript
function changeCell(obj){
var CELL = document.getElementById("noneLine");
var TABLE = CELL.parentNode.parentNode.parentNode;
for(var i=0;TABLE.rows[i];i++) {
TABLE.rows[i].cells[CELL.cellIndex].style.visibility =
(obj.checked)?'hidden':'';
}
}
//切替チェックボックス(thisを引数として追加しています。)
<input name="check_type" type="checkbox" onclick="changeCell(this);">
//テーブルはそのまま。
<||
No.3
40
10pt
“行”というより“列”を非表示にしたいのではないでしょうか？
一番上だけthで、残りがtdだとして書きます。
//Javascript
function changeCell(){
var tar=document.getElementsByTagName('td');//いちいち書くのが面倒なので
if(document.form1.check_type.checked == true){
document.getElementById('noneLine').style.visibility="hidden";
for(i=2;i<tar.length;i+=3){//数字及び範囲は必要に応じて修正して下さい</p>
tar.style.visibility = "hidden";
}
}else{
document.getElementById("noneLine").style.visibility = "visible";
for(i=2;i<tar.length;i+=3){//</p>
tar.style.visibility = "visible";
}
}
}
これでどうでしょうか。
記述方法は人によって結構変わるので、見辛かったらすみません。
確認画面で入れてもいない</p>が入るのは仕様でしょうか？
この“はてな”自体、初めて間もないのでわかりません。すみません。
No.4
20
10pt
質問のソースのままならばchangeCell
使いまわ（せるようなものでもないですが）すならばchangeCell(className)
それぞれ呼び出し元を修正してください
最適化などは行っていません
サンプルとしてご覧ください
このようなソースでよろしいでしょうか？
<html>
<head>
<title>getElementsByClass</title>
<script type="text/javascript">
<!--
/*
function changeCell(){
if(document.form1.check_type.checked == true){
var e=document.getElementsByTagName('*');
for (var i = 0; i < e.length; i++){
if(e[i].className == 'noneLine'){
e[i].style.display = 'none';
}
}
}else{
var e=document.getElementsByTagName('*');
for (var i = 0; i < e.length; i++){
if(e[i].className == 'noneLine'){
e[i].style.display = '';
}
}
}
}
/*/
function changeCell(className){
if(document.form1.check_type.checked == true){
var e = getElementsByClass(className);
for (var i = 0; i < e.length; i++){
e[i].style.display = 'none';
}
}else{
var e = getElementsByClass(className);
for (var i = 0; i < e.length; i++){
e[i].style.display = '';
}
}
}
// 参照 http://blog.livedoor.jp/nipotan/archives/15424695.html
function getElementsByClass(searchClass) {
var classElements = new Array();
var allElements = document.getElementsByTagName("*");
for (i = 0, j = 0; i < allElements.length; i++) {
if (allElements[i].className == searchClass) {
classElements[j] = allElements[i];
j++;
}
}
return classElements;
}
//*/
-->
</script>
</head>
<body>
<form name="form1">
<input name="check_type" type="checkbox" onclick="changeCell('noneLine');">
</form>
<table border="1">
<tr>
<th>あああ</th>
<th>いいい</th>
<th class="noneLine">ううう</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td class="noneLine">ccc</td>
</tr>
</table>
</body>
</html>
たーちゃん
2007/10/20 11:03:33
2
1
2
1
1
1
Mars
TOMOSUMA
まさにこれです！どうもありがとうございました。