顯示多個表

我有兩個單選按鈕，其中itemwise和supplierwise的值。如果我選擇itemwise然後我應該顯示一個表，如果我選擇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>

來源

2013-04-12 user1407310

使用的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(); 
}

就是這樣。

另外，由於問題與JSP/JSP相關的問題更多，請您添加這些標籤？只是爲了清晰...

來源

2013-04-12 09:00:32 Powerslave

謝謝....現在它的工作 – user1407310

@ user1407310不客氣！ – Powerslave

@ user1407310如果我問你是否接受答案，你介意嗎？ – Powerslave

回答

相關問題