Question

我有两个表，它们都在页面加载时隐藏，但根据条件显示一个表，反之则隐藏其他表。问题是表格未显示在操作中。

我尝试使用jquery隐藏表，但加载页面时用户可以看到表1或2秒。因此，这就是使用CSS隐藏的原因。

问题1：如何使工作表生效？问题2：在显示表格时如何在同一位置显示表格并隐藏另一个？

这是我的代码：

document.getElementById("test1").style.display="block";
document.getElementById("test2").style.display="none";

#test1,#test2{
    display:none;
}

<table id="test1" class="display" width="100%" border="1">
  <tr>
    <td><b>Name :</b> <label for="nme" style="vertical-align: middle"></label></td>
    <td><b>Expanded Name :</b> <label for="frml_nme" style="vertical-align: middle"></label></td>
  </tr>
</table>
<table id="test2" class="display" width="100%" border="1">
  <tr>
    <td><b>Feed Name :</b> <label for="feed_id" style="vertical-align: middle"></label></td>
    <td><b>Source :</b> <label for="source" style="vertical-align: middle"></label></td>
  </tr>
</table>

Answer 1

我认为这个答案可能会对您有所帮助。

function hideTable(id) {
    document.getElementById(id).style.display = 'none';
}

function showTable(id) {
    document.getElementById(id).style.display = 'block';
}

showTable('test1');
hideTable('test2');

<table id="test1" class="display" width="100%" border="1">
    <tr>
        <td><b>Name :</b> <label for="nme" style="vertical-align: middle"></label></td>
        <td><b>Expanded Name :</b> <label for="frml_nme" style="vertical-align: middle"></label></td>
    </tr>
</table>
<table id="test2" class="display" width="100%" border="1">
    <tr>
        <td><b>Feed Name :</b> <label for="feed_id" style="vertical-align: middle"></label></td>
        <td><b>Source :</b> <label for="source" style="vertical-align: middle"></label></td>
    </tr>
</table>
<button onclick="showTable('test1');hideTable('test2')">Show table 1</button>
<button onclick="showTable('test2');hideTable('test1')">Show table 2</button>

Answer 2

var btnOne = document.getElementById('one');
var btnTwo = document.getElementById('two');

btnOne.addEventListener('click', function() {
  document.getElementById("table2").style.display = "block";
  document.getElementById("table2").style.display = "none";
});

btnTwo.addEventListener('click', function() {
  document.getElementById("table1").style.display = "block";
  document.getElementById("table2").style.display = "none";
});

Demo

如果您使用的是jQuery（未标记），那么事情会更简单：

$('#btnOne').click(function() {
  $('#table1').show();
  $('#table2').hide;
});

$('#btnTwo').click(function() {
  $('#table2').show();
  $('#table1').hide;
});

Demo 2

Answer 3

类似的东西吗？

<html>

<head>

</head>


<body>
    <style>
        #test1,
            #test2 {
                display: none;
            }

        </style>

    <table id="test1" class="display" width="100%" border="1">
        <tr>
            <td><b>Name :</b> <label for="nme" style="vertical-align: middle"></label></td>
            <td><b>Expanded Name :</b> <label for="frml_nme" style="vertical-align: middle"></label></td>
        </tr>

    </table>
    <table id="test2" class="display" width="100%" border="1">
        <tr>
            <td><b>Feed Name :</b> <label for="feed_id" style="vertical-align: middle"></label></td>
            <td><b>Source :</b> <label for="source" style="vertical-align: middle"></label></td>
        </tr>
    </table>
    <input type="button" value="tbl1" onclick="open1()">
    <input type="button" value="tbl2" onclick="open2()">

    <script>
        function open1() {
            document.getElementById("test1").style.display = "block";
            document.getElementById("test2").style.display = "none";

        }

        function open2() {
            document.getElementById("test2").style.display = "block";
            document.getElementById("test1").style.display = "none";

        }

    </script>

</body>

</html>

使用显示块在单击按钮时未显示HTML表

3 个答案: