如何根據瀏覽器窗口大小動態調整html表格

我希望我的網站根據網頁瀏覽器的大小顯示不同。基於來自其他用戶的問題/答案，我得到了這個工作與JavaScript onload。但是我無法動態地實現它 - 也就是說，隨着用戶正在調整窗口，這是實時的。他們必須刷新以獲取網頁的格式才能更改。如何根據瀏覽器窗口大小動態調整html表格

這裏是我當前的代碼：

<table class="index_table" border="0"> 
<tr> 
    <!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE --> 
    <script> 
    if (window.innerWidth > 900){ 
    document.write('<td rowspan="3" class="index_article"></td>'); 
    } 
    </script> 
    <!-- END OF JAVASCRIPT --> 
    <td class="index_article_light"> 
     <h2 class="index_instructions_subheader">INSERT HEADER HERE</h2> 
     <p class="index_instructions">INSERT PARAGRAPH HERE.</p> 
     <p class="index_instructions">INSERT PARAGRAPH HERE. </p> 
      <br /> 
      <form action="signup.html" style="vertical-align:top;"> 
       <table border="0" style="margin-left:auto;margin-right:auto;width:400px;"> 
        <tr> 
         <td> 
          <input type="text" name="search" class="firstname" value="&nbsp;First name"> 
         </td> 
         <td> 
          <input type="text" name="search" class="lastname" value="&nbsp;Last name"> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <input type="text" name="search" class="email" value="&nbsp;Email"> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <div style="color:#979797;">Password:&nbsp;<br /><input type="password" name="password" class="password" value="Password"></div> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <div style="color:#979797;">Verify password:&nbsp;<input type="password" name="verify_passwords" class="password" value="Password"></div> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <select> 
           <option value="kent">INSERT LIST HERE</option> 
          </select> 
         </tr> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <input type="submit" value="signup!" style="float:right;" id="result_submit"> 
         </td> 
        </tr> 
       </table> 
      </form> 
    </td> 
</tr> 
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE --> 
    <script> 
    if (window.innerWidth < 900){ 
    document.write('<tr><td class="index_article" style="height:200px;"></td></tr>'); 
    } 
    </script> 
    <!-- END OF JAVASCRIPT -->

注：我知道我不應該使用的表，我應該使用div秒。但那是另一個問題......在我知道之前，我開始建立這個網站。我也知道這很sl。。所以，只要忍受我。我正試着和它一起去，直到我有時間修復它。

來源

2014-09-01 John Steve

$（窗口）.resize（函數（）{ ...}）; – Oliboy50 2014-09-01 00:46:55

不要覺得不舒服，桌子和內嵌框架還沒有死！而且不會有更近的未來。 – 2014-09-01 00:48:22

@GuillermoGutiérrez不知道你在看什麼未來 - 他們很快就會死在大多數新作品中。 – 2014-09-01 00:50:38

你不應該使用JavaScript進行響應的網頁設計這之外。使用CSS代替媒體查詢。所以，你寫你的HTML：

<table class="index_table" border="0"> 
<tr> 
    <!--This only will display on screen-width>900--> 
    <td id="big_device_index" rowspan="3" class="index_article"></td> 
    <td class="index_article_light"> 
     <h2 class="index_instructions_subheader">INSERT HEADER HERE</h2> 
     <p class="index_instructions">INSERT PARAGRAPH HERE.</p> 
     <p class="index_instructions">INSERT PARAGRAPH HERE. </p> 
      <br /> 
      <form action="signup.html" style="vertical-align:top;"> 
       <table border="0" style="margin-left:auto;margin-right:auto;width:400px;"> 
        <tr> 
         <td> 
          <input type="text" name="search" class="firstname" value="&nbsp;First name"> 
         </td> 
         <td> 
          <input type="text" name="search" class="lastname" value="&nbsp;Last name"> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <input type="text" name="search" class="email" value="&nbsp;Email"> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <div style="color:#979797;">Password:&nbsp;<br /><input type="password" name="password" class="password" value="Password"></div> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <div style="color:#979797;">Verify password:&nbsp;<input type="password" name="verify_passwords" class="password" value="Password"></div> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <select> 
           <option value="kent">INSERT LIST HERE</option> 
          </select> 
         </tr> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <input type="submit" value="signup!" style="float:right;" id="result_submit"> 
         </td> 
        </tr> 
       </table> 
      </form> 
    </td> 
</tr> 
<!--This only will display on screen-width<900--> 
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>

使用下面的CSS：

@media all and (max-width: 899px) { 
    #big_device_index { 
     display: none; 
    } 
@media all and (min-width: 900px) { 
    #small_device_index { 
     display: none; 
    }

您可以瞭解更多有關媒體查詢here }

來源

2014-09-01 00:59:53

謝謝！這很好！感謝幫助！ – 2014-09-01 13:10:19

所以我會很感激，如果你可以officialy「接受」我的回答;） – 2014-09-01 22:34:28

完成！對不起，我是新來的stackoverflow。甚至不知道你可以做到這一點哈哈 – 2014-09-06 20:33:04

添加的if (window.innerWidth > 900){.....

$(window).resize(function(){ 
     if (window.innerWidth > 900){ 
       $('.index_article').remove(); 
       $('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>'); 
     } 
}

希望這會幫助你，確保包括最前一頁jquery.min.js

來源

2014-09-01 00:53:02 Ahmad

如何根據瀏覽器窗口大小動態調整html表格

回答

相關問題