0

itemwiseとsupplierwiseの値を持つ2つのラジオボタンがあります。itemwise を選択した場合は 1 つのテーブルを表示し、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>
4

1 に答える 1

1

style.visibilityの代わりにstyle.displayを使用する

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

また、JS コードを簡素化するためにjQueryを使用することをお勧めします。たとえば、次のことができます。

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

以上です。

また、質問はJSPよりもHTML/CSSに関連しているため、それらのタグを追加していただけますか? わかりやすくするために...

于 2013-04-12T09:00:32.900 に答える