Question

我有两个单选按钮，其中包含itemwise和supplierwise的值。如果我按项目选择，那么我应该显示一个表，如果我选择supplierwise，那么我应该显示另一个表。我的编码正确显示表格，但表格不显示在同一位置。要在同一位置显示它们我该怎么办？我的代码如下-----

<html>
<head>
<script language="javascript">
    function hideTable()
        {

            document.getElementById('item_table').style.visibility = "hidden";
            document.getElementById('supplier_table').style.visibility = "hidden";
        }
        function showItemTable()
        {
            if(document.getElementById("item_selection").checked==true)
            {
                document.getElementById('supplier_table').style.visibility = "hidden";
                document.getElementById('item_table').style.visibility = "visible";
            }
        }
        function showSupplierTable()
        {
            if(document.getElementById("supplier_selection").checked==true)
            {
                document.getElementById('item_table').style.visibility = "hidden";
                document.getElementById('supplier_table').style.visibility = "visible";
            }
        }
</script>
</head>
<body onload="javascript:hideTable()">
    <form name = "form1" method ="post" action="">
        <table border="1"  align="center">
                    <tr>
                        <td>Report Required</td>
                        <td><input type="radio" name="item_selection" id="item_selection" onclick="showItemTable()">Item Wise</td>                
                        <td><input type="radio" name="item_selection" id="supplier_selection" onclick="showSupplierTable()">Supplier Wise</td>    
                    </tr>
                </table>

        <table border="1" bgColor="#9999CC" align="center" id="item_table">
                        <tr>
                            <td  colspan="2">Item Type</td>
                            <td colspan="2"><%=item_typeddListStr%></td>
                        </tr>         
                        <tr>
                            <td  colspan="2">Item Category</td>
                            <td colspan="2"><%=item_categoryddListStr%></td>
                        </tr> 
                        <tr>
                            <td  colspan="2">Item Name</td>
                            <td colspan="2" id='item_code'>  
                                <select name='item_code' >  
                                    <option value='-1'></option>  
                                </select>  
                            </td>
                        </tr>
                        <tr>
                            <td>From Date</td>
                            <td><input type="text" name="indent_date" id="issue_date_first"  size="12"/></td>
                            <td>To Date</td>
                            <td><input type="text" name="indent_date" id="issue_date_second"  size="12"/></td>
                        </tr>
                        <tr>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Get Records" onclick="return validate()"></td>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Generate Report" onclick="return validate()"></td>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Clear Form"></td>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Back"></td>
                        </tr>
                    </table>

            <table border="1" bgColor="#9999CC" align="center" id="supplier_table">
                        <tr>
                            <td  colspan="2">Supplier Name</td>
                            <td colspan="2"><%=supplier_codeddListStr%></td>
                        </tr>
                        <tr>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Get Records" onclick="return validate()"></td>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Generate Report" onclick="return validate()"></td>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Clear Form"></td>
                            <td colspan="1"><input type ="submit" name ="submit" value ="Back"></td>
                        </tr>
                    </table>    
    </form>
</body>
</html>

Answer 1

使用 style.display 代替 style.visibility

document.getElementById('supplier_table').style.display = "none";
// ...
document.getElementById('supplier_table').style.display= "block";

我还建议使用jQuery来简化JS代码。例如，您可以

function swapTables() {
    $("#supplier_table").toggle();
    $("#item_table").toggle();
}

就是这样。

此外，由于问题与HTML / CSS的关系比JSP更多，您可以添加这些标签吗？为了清楚起见......

显示多个表格

1 个答案: