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语言的编码而言，我正在开发一个简单的隐藏节目，上面的代码（代码片段）是一个表，当你点击表格单元格 10- 2013年5月一些下面的表行将如何显示，在那种情况下，我是否正确？我的代码中缺少的是当我再次点击表格单元格 10-May-2013 时它会再次隐藏，或者恢复其默认样式（隐藏或折叠表格）。

Answer 1

尝试

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

演示：Fiddle

Answer 2

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

e.g。

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

改变风格的javascript

2 个答案: