使用Javascript更改单元格的样式显示

时间:2011-01-11 14:28:16

标签: javascript html

我想做这样的事情:用户选择一个单选按钮(锁定,删除或比较)。 我只想向他展示表格中的相关栏目。 (每个选项都有不同的列)。该表是ajax。 我想我需要改变每个细胞的显示风格,但我不知道如何。

以下是示例:

这里我想更改单元格的显示

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:

 <table class="auditable">
   <thead id="audithead">
     <tr><td></td></tr>
   </thead>

 <tbody id="auditTblBody">
 </tbody>
 </table>

修改 整行就是这样:

<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>

非常感谢你!

1 个答案:

答案 0 :(得分:0)

您可以使用div或任何其他元素执行相同的操作。 javascript看起来像:

<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>