javascript - javascript改变样式

Question

<script>
    function hide()
    {
        document.getElementById("xxx").style.visibility='visible';
    }
</script>
<tr>
    <td>655 3338</td>   
    <td onclick='hide()'>10-May-2013</td>       
</tr>
<tr id='xxx' style='visibility:collapse'>
    <td>655 3338</td>   
    <td>10-May-2013</td>        
</tr>

大家好，我是 javascript 语言编码方面的新手，我正在开发一个简单的隐藏显示，当你单击表格单元格时，上面的代码（一段代码）是一个表格2013 年 5 月 10 日一些如何下面的表格行将显示，在那种情况下，我是否正确？我的代码缺少的是，当我在2013 年 5 月 10 日再次单击表格单元格时，它将再次隐藏，或返回其默认样式（隐藏或折叠表格）。

Answer 1

尝试

function hide(){
    if(document.getElementById("xxx").style.visibility != 'visible'){
        document.getElementById("xxx").style.visibility='visible';
    } else {
        document.getElementById("xxx").style.visibility='collapse';
    }
}

演示：小提琴

Answer 2

您可能最好将行的显示属性切换为“无”和“”（空字符串），因为显示得到广泛支持并且似乎更适合这里。

例如

<table>
  <tr><td><button onclick="hideNextRow(this);">Show/Hide next row</button>
  <tr><td>The next row
</table>

<script>

function hideNextRow(node) {

    // Get the parent row
    var row = upTo(node, 'tr');

    // If there is one, get the next row in the table
    if (row) {
        row = row.parentNode.rows[row.rowIndex + 1];
    }

    // If there is a next row, hide or show it depending on the current value
    // of its style.display property
    if (row) {
       row.style.display = row.style.display == 'none'? '' : 'none';
    }
}

// Generic function to go up the DOM to the first parent with a
// tagName of tagname
function upTo(node, tagname) {
  var tagname = tagname.toLowerCase();

  do {
    node = node.parentNode;
  } while (node && node.tagName && node.tagName.toLowerCase() != tagname) 

  // Return the matching node or undefined if not found
  return node && node.tagName && node.tagName.toLowerCase() == tagname? node : void 0;
}
</script>