2011-01-11 9 views
1

私はこのようなことをしたい:ユーザーがラジオボタン(ロック、削除、比較)を1つ選択する。 私は彼にテーブルから関連する列だけを見せたいと思います。 (各オプションには異なる列があります)。テーブルはajaxです。 私はすべてのセルの表示スタイルを変更する必要があると思いますが、私はどのようにわかりません。ここでJavascriptでセルのスタイル表示を変更する

は一例です:

ここで私は私がそのような何か必要があると思い細胞

function ButtonForTbl(value) { 
var x=document.getElementById("audithead").rows[0].cells; 
if (value == "lock"){ 
document.getElementById('lock').checked = true; 
//something like for(...)lockCell.style.display='' 
//something like for(...)deleteCell.style.display='none' 
//something like for(...)compareCell.style.display='none' 
} 
else if(value == "delete"){ 
document.getElementById('delete').checked = true; 
//something like for(...)lockCell.style.display='none' 
//something like for(...)deleteCell.style.display='' 
//something like for(...)compareCell.style.display='none' 
} 
else{ 
document.getElementById('compare').checked = true; 
} 
} 

の表示に変更したい:

for (i = 0; i < deleteCell.length; i++) 
deleteCell[i].style.display='' = true ; 

テーブル:

oCell = oRow.insertCell(-1); 
oCell.setAttribute('id','comCell'); 
oCell.setAttribute('align', 'center'); 
oCell.innerHTML = "<input type='checkbox' id='com' value='"+ ind + "'name='com[]'>"; 

oCell = oRow.insertCell(-1); 
oCell.setAttribute('id','lockCell'); 
oCell.setAttribute('align', 'center'); 
oCell.innerHTML = "<input type='checkbox' id='lock' value='"+ ind + "'name='lock[]'>"; 

ラジオボタン:

<input type="radio" value="compare" id="compare" name="choose" onclick="ButtonForTbl(this.value)"/> Compare&nbsp; 
<input type="radio" value="delete" id="delete" name="choose" onclick="ButtonForTbl(this.value)"/> Delete&nbsp; 
<input type="radio" value="lock" id="lock" name="choose" onclick="ButtonForTbl(this.value)"/> Lock<br/> 

テーブルのhtml:

​​3210

EDIT: 全行がそのようなものです:

<tr> 
<td align="center" id="lockCell" style="display: none;"> 
<input type="checkbox" onclick="" name="lock[]" value="1500" id="lock"></td> 
<td align="center" id="delCell" style="display: none;"> 
<input type="checkbox" name="del[]" value="1500"></td> 
<td align="center" id="comCell"> 
<input type="checkbox" onclick="setChecks(this)" name="com[]" value="1500" id="com"></td> 
<td width="65px">100% 1/1</td><td width="105px">2011-01-10 17:47:37</td> 
</tr> 

はありがとうございました!

+0

あなたは私たちに完全な行を表示することができますか? – Nabab

+1

jQueryやPrototypeのようなライブラリを使うと恩恵を受けるようです。次に、特定のIDまたはスタイルクラスを持つテーブルセルを生成し、id /クラス値でフィルタリングされたセルを簡単に表示/非表示できます。 – JST

+0

質問を編集しました。私はフレームワークを使用したくない。 – Ronny

答えて

0

divやその他の要素でも同じことができます。

<script language='javascript'> 
<!-- // 
function setProperties(obj) 
{ 
if(obj.value == "yes") 
{ 
document.mydiv.style.display = "block"; 
} else { 
document.mydiv.style.display = "none"; 
} 
} 
// --> 
</script> 

、体内の:ジャバスクリプトは次のようになり

<input type=radio name="update" value="yes" checked onclick="setProperties(this)">Yes<br /> 
<input type=radio name="update" value="no" onclick="setProperties(this)">No<br /> 
<div id='mydiv'>some text here</div> 
関連する問題