Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Растёт высота таблицы


Автор: Vidocq 30.3.2006, 12:29
При многократном нажатии на опции селекта "сервер" растёт высота таблицы(формы). Т.е. страница становится длиннее. Как мне этого избежать? Заранее благодарен


Код

<script language='javascript'>
function loadFields(){
type = document.getElementById('server');
//alert(type.value);
if (type.value == 1)
    {
    pop1 = document.getElementById('pop1');
    pop2 = document.getElementById('pop2');
    pop3 = document.getElementById('pop3');
    pop4 = document.getElementById('pop4');
    pop5 = document.getElementById('pop5');
    pop6 = document.getElementById('pop6');
    
    pop1.style.display = "block";
    pop2.style.display = "block";
    pop3.style.display = "block";
    pop4.style.display = "block";
    pop5.style.display = "block";
    pop6.style.display = "block";

    web1 = document.getElementById('web1');
    web2 = document.getElementById('web2');
    web3 = document.getElementById('web3');
    web4 = document.getElementById('web4');
    web5 = document.getElementById('web5');
    
    web1.style.display = "none";
    web2.style.display = "none";
    web3.style.display = "none";
    web4.style.display = "none";
    web5.style.display = "none";

    nrpe1 = document.getElementById('nrpe1');
    nrpe2 = document.getElementById('nrpe2');
    nrpe3 = document.getElementById('nrpe3');

    nrpe1.style.display = "none";
    nrpe2.style.display = "none";
    nrpe3.style.display = "none";
    
    }
if(type.value == 2)
    {
    pop1 = document.getElementById('pop1');
    pop2 = document.getElementById('pop2');
    pop3 = document.getElementById('pop3');
    pop4 = document.getElementById('pop4');
    pop5 = document.getElementById('pop5');
    pop6 = document.getElementById('pop6');
    
    pop1.style.display = "none";
    pop2.style.display = "none";
    pop3.style.display = "none";
    pop4.style.display = "none";
    pop5.style.display = "none";
    pop6.style.display = "none";

    web1 = document.getElementById('web1');
    web2 = document.getElementById('web2');
    web3 = document.getElementById('web3');
    web4 = document.getElementById('web4');
    web5 = document.getElementById('web5');
    
    web1.style.display = "block";
    web2.style.display = "block";
    web3.style.display = "block";
    web4.style.display = "block";
    web5.style.display = "block";

    nrpe1 = document.getElementById('nrpe1');
    nrpe2 = document.getElementById('nrpe2');
    nrpe3 = document.getElementById('nrpe3');

    nrpe1.style.display = "none";
    nrpe2.style.display = "none";
    nrpe3.style.display = "none";
    
    
    }
if(type.value == 3)
    {
    pop1 = document.getElementById('pop1');
    pop2 = document.getElementById('pop2');
    pop3 = document.getElementById('pop3');
    pop4 = document.getElementById('pop4');
    pop5 = document.getElementById('pop5');
    pop6 = document.getElementById('pop6');
    
    pop1.style.display = "none";
    pop2.style.display = "none";
    pop3.style.display = "none";
    pop4.style.display = "none";
    pop5.style.display = "none";
    pop6.style.display = "none";

    web1 = document.getElementById('web1');
    web2 = document.getElementById('web2');
    web3 = document.getElementById('web3');
    web4 = document.getElementById('web4');
    web5 = document.getElementById('web5');
    
    web1.style.display = "none";
    web2.style.display = "none";
    web3.style.display = "none";
    web4.style.display = "none";
    web5.style.display = "none";

    nrpe1 = document.getElementById('nrpe1');
    nrpe2 = document.getElementById('nrpe2');
    nrpe3 = document.getElementById('nrpe3');

    nrpe1.style.display = "block";
    nrpe2.style.display = "block";
    nrpe3.style.display = "block";

    
    }
}
</script>




Код

<html><head>
<link rel='stylesheet' href='images/lay_default.css'  type='text/css'></head>
<body>
<form>
<table style='border-color: rgb(153, 153, 153); width: 100%;' align='center' border='1' cellpadding='2' cellspacing='0'>
  <tbody> 
  <tr> 
    <td style='width: 100%;' valign='top'> 
      <table border='0'>
        <tbody> 
        <tr> 
          <td>
            <table id="table" class='smarty_form_table' border='0' cellpadding='0' cellspacing='2' width='100%'>
              <tbody>
          
          <tr> 
                <td class=smarty_form_td_label width='200'><strong>Server</strong></td>
        <td class='smarty_form_td_required' nowrap='nowrap' width='1'>&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select id='server' name='select4' class='inputtext1'  onchange='loadFields()' style='WIDTH: 280px'>
                    <option value='1'>POP3, POP3/SMTP, IMAP, IMAP/SMTP</option>
                    <option value='2'>WEB</option>
                    <option value='3'>NRPE</option>
                  </select>
                </td>
          </tr>
          

         <tr id="pop1">
        
            
               <td class="smarty_form_td_label" nowrap="nowrap" width="200">User name</td>
               <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
               <td class="smarty_form_td_value" width="100%">
                 <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
               </td>
          </tr>
          <tr id="pop2" > 
                <td class=smarty_form_td_label width="200">Password</td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                 <input type="password" name="textfield2" class="inputtext1" value="******" class="smarty_form_td_value">
                </td>
              </tr >
          
    <tr id="pop3" > 
                <td class=smarty_form_td_label width="200"><strong>Connection Type <br>POP3/IMAP</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="0" selected>regular</option>
                    <option value="1">secure to regular port</option>
                    <option value="2">secure to dedicated port</option>
                  </select>
                </td>
          </tr>
          <tr id="pop4" > 
                <td class=smarty_form_td_label width="200"><strong>Connection Type SMTP</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="0" selected>regular</option>
                    <option value="1">secure to regular port</option>
                    <option value="2">secure to dedicated port</option>
                  </select>
                </td>
          </tr>    

        
          <tr id="pop5" > 
                <td class=smarty_form_td_label width="200"><strong>Monitoring Server</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="1" selected>server1</option>
                    <option value="2">server2</option>
                    <option value="3">server3</option>
                  </select>
                </td>
          </tr>                      
          <tr id="pop6" > 
                <td class=smarty_form_td_label width="200"><strong>Enabled</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 50px">
                    <option value="1" selected>All</option>
                    <option value="2">Yes</option>
                    <option value="3">No</option>
                  </select>
                </td>
          </tr>



        <tr id="web1" style='display:none;'>
                <td class="smarty_form_td_label" nowrap="nowrap" width="200">URL</td>
                <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class="smarty_form_td_value" width="100%">
                  <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
                </td>
          </tr>
          <tr id="web2" style='display:none;'>
                <td class="smarty_form_td_label" nowrap="nowrap" width="200">User name</td>
                <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class="smarty_form_td_value" width="100%">
                  <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
                </td>
          </tr>
          <tr id="web3" style='display:none;'> 
                <td class=smarty_form_td_label width="200">Password</td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
            <span class=display1> 
                  <input type="password" name="textfield2" class="inputtext1" value="******" class="smarty_form_td_value">
                    </span></td>
              </tr>
          

          <tr id="web4" style='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Monitoring Server</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="1" selected>server1</option>
                    <option value="2">server2</option>
                    <option value="3">server3</option>
                  </select>
                </td>
          </tr>
          
                  
            <tr id="web5" style='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Enabled</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 50px">
                    <option value="1" selected>All</option>
                    <option value="2">Yes</option>
                    <option value="3">No</option>
                  </select>
                </td>
          </tr>
    
    <tr id="nrpe1" style='display:none;'>
                <td class="smarty_form_td_label" nowrap="nowrap" width="200">Path to Command</td>
                <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class="smarty_form_td_value" width="100%">
                  <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
                </td>
          </tr>
          
          

          <tr id="nrpe2" style='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Monitoring Server</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="1" selected>server1</option>
                    <option value="2">server2</option>
                    <option value="3">server3</option>
                  </select>
                </td>
          </tr>

          
                  
            <tr id="nrpe3" style='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Enabled</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 50px">
                    <option value="1" selected>All</option>
                    <option value="2">Yes</option>
                    <option value="3">No</option>
                  </select>
                </td>
          </tr>      



</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</form>


</body></html>

Автор: Vidocq 30.3.2006, 12:55
оказалось, что это только в файрфоксе. В ИЕ ваще ошибку выдает: getElementById - object does not suppor this property or method

Автор: 12345c 30.3.2006, 16:09
Ошибка в IE - jn повторений имён pop1 - переменных и ID-ов. В FF проверил - gjkexftncz, xnj любая таблица после выхода из display='none' нарушается по разметке. Попробовал сделать в 3 разных таблицах (с дублированием селектов в 1-й строке) - результат тот же. Точнее, размер не растёт, но формат нарушается. Особенно интересен эффект, что 1-я ячейка принимается за colspan=3.

В общем, тут наворочено (кроме Vidocq, никому не смотреть smile ) в предложенном стиле, эффект в FF убирается, корректность показа строчки селекта делается позже заинтересованным лицом.
Код
<html><head>
<script>
function loadFields(i){
type = document.getElementById('server'+i);
//alert(type.value);
if (type.value == 1)
    {
document.getElementById('table1').style.display = "block";
document.getElementById('table2').style.display = "none";
document.getElementById('table3').style.display = "none";
    }
if(type.value == 2)
    {
document.getElementById('table1').style.display = "none";
document.getElementById('table2').style.display = "block";
document.getElementById('table3').style.display = "none";
    }
if(type.value == 3)
    {
document.getElementById('table1').style.display = "none";
document.getElementById('table2').style.display = "none";
document.getElementById('table3').style.display = "block";

    }
}
</script>
<!link rel='stylesheet' href='images/lay_default.css'  type='text/css'></head>
<body>
<form id=f1>
            <table id="table1" class=smarty_form_table border=1 cellpadding=0 cellspacing=2>
           <tr id="pop1">
               <td class="smarty_form_td_label" nowrap="nowrap" width="200">Server</td>
               <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
               <td class="smarty_form_td_value"><select id=server1 name=select4  onchange=loadFields(1)>
                    <option value=1>POP3, POP3/SMTP, IMAP, IMAP/SMTP</option>
                    <option value=2>WEB</option>
                    <option value=3>NRPE</option>
                  </select>
               </td>
          </tr>
          <tr id="pop2" > 
                <td class=smarty_form_td_label width="200">Password</td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                 <input type="password" name="textfield2" class="inputtext1" value="******" class="smarty_form_td_value">
                </td>
              </tr>
          
    <tr id="pop3" > 
                <td class=smarty_form_td_label width="200"><strong>Connection Type <br>POP3/IMAP</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="0" selected>regular</option>
                    <option value="1">secure to regular port</option>
                    <option value="2">secure to dedicated port</option>
                  </select>
                </td>
          </tr>
          <tr id="pop4" > 
                <td class=smarty_form_td_label width="200"><strong>Connection Type SMTP</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="0" selected>regular</option>
                    <option value="1">secure to regular port</option>
                    <option value="2">secure to dedicated port</option>
                  </select>
                </td>
          </tr>    

        
          <tr id="pop5" > 
                <td class=smarty_form_td_label width="200"><strong>Monitoring Server</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="1" selected>server1</option>
                    <option value="2">server2</option>
                    <option value="3">server3</option>
                  </select>
                </td>
          </tr>                      
          <tr id="pop6" > 
                <td class=smarty_form_td_label width="200"><strong>Enabled</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 50px">
                    <option value="1" selected>All</option>
                    <option value="2">Yes</option>
                    <option value="3">No</option>
                  </select>
                </td>
          </tr>

</table>
<table id="table2" class='smarty_form_table' border='1' cellpadding='0' cellspacing='2' width='100%'>
          <tr> 
                <td class=smarty_form_td_label  style="WIDTH: 200px"><strong>Server</strong></td>
        <td class='smarty_form_td_required' nowrap='nowrap' width='1'>&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select id='server2' name='select5' class='inputtext1'  onchange='loadFields(2)' style='WIDTH: 280px'>
                    <option value='1'>POP3, POP3/SMTP, IMAP, IMAP/SMTP</option>
                    <option value='2' selected>WEB</option>
                    <option value='3'>NRPE</option>
                  </select>
                </td>
          </tr>
        <tr id="web1" st yle='display:none;'>
                <td class="smarty_form_td_label" nowrap="nowrap" width="200">URL</td>
                <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class="smarty_form_td_value" width="100%">
                  <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
                </td>
          </tr>
          <tr id="web2" st yle='display:none;'>
                <td class="smarty_form_td_label" nowrap="nowrap" width="200">User name</td>
                <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class="smarty_form_td_value" width="100%">
                  <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
                </td>
          </tr>
          <tr id="web3" st yle='display:none;'> 
                <td class=smarty_form_td_label width="200">Password</td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
            <span class=display1> 
                  <input type="password" name="textfield2" class="inputtext1" value="******" class="smarty_form_td_value">
                    </span></td>
              </tr>
          

          <tr id="web4" st yle='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Monitoring Server</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="1" selected>server1</option>
                    <option value="2">server2</option>
                    <option value="3">server3</option>
                  </select>
                </td>
          </tr>
          
                  
            <tr id="web5" st yle='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Enabled</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 50px">
                    <option value="1" selected>All</option>
                    <option value="2">Yes</option>
                    <option value="3">No</option>
                  </select>
                </td>
          </tr>
</table>
<table id="table3" class='smarty_form_table' border='1' cellpadding='0' cellspacing='2' width='100%'>
          <tr> 
                <td class=smarty_form_td_label  style="WIDTH: 200px"><strong>Server</strong></td>
        <td class='smarty_form_td_required' nowrap='nowrap' width='1'>&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select id='server3' name='select6' class='inputtext1'  onchange='loadFields(3)' style='WIDTH: 280px'>
                    <option value='1'>POP3, POP3/SMTP, IMAP, IMAP/SMTP</option>
                    <option value='2'>WEB</option>
                    <option value='3' selected>NRPE</option>
                  </select>
                </td>
          </tr>
    
    <tr id="nrpe1" sty le='display:none;'>
                <td class="smarty_form_td_label" nowrap="nowrap" width="200">Path to Command</td>
                <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class="smarty_form_td_value" width="100%">
                  <input class="inputtext1" type="text"  style="width: 200px;" name="config_path">
                </td>
          </tr>
          
          <tr id="nrpe2" st yle='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Monitoring Server</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 200px">
                    <option value="1" selected>server1</option>
                    <option value="2">server2</option>
                    <option value="3">server3</option>
                  </select>
                </td>
          </tr>

          <tr id="nrpe3" s tyle='display:none;'> 
                <td class=smarty_form_td_label width="200"><strong>Enabled</strong></td>
        <td class="smarty_form_td_required" nowrap="nowrap" width="1">&nbsp;</td>
                <td class=smarty_form_td_value> 
                  <select name="select4" class="inputtext1"  style="WIDTH: 50px">
                    <option value="1" selected>All</option>
                    <option value="2">Yes</option>
                    <option value="3">No</option>
                  </select>
</td></tr></table>
</form>
</body></html>

Автор: 12345c 30.3.2006, 16:32
jn == от
gjkexftncz, xnj == получается, что

Автор: Vidocq 30.3.2006, 17:53
Это +1 без базара. Но в чем же всё-таки ошибка была?

Автор: 12345c 30.3.2006, 18:11
Раньше тут говорили про особенность работы FF со стилем display:none, я лично не имел счастья наблюдать, но тут привалило ;). Но был разговор не про таблицы и строчки, а про невозможность получения каких-то атрибутов из невидимого слоя (не hidden). Похоже, что некоторые атрибуты он теряет, ширину ячейки - явно. И совсем непредсказуемо себя ведёт при восстановлении невидимых строк таблицы. (Использовалась версия FF 1.06.) Я не мог найти отличий в случаях, когда возникает глючный colspan=3 (т.е. которого не прописано), а когда нет.

Автор: Vidocq 3.4.2006, 10:35
12345c,
спасибо в любом случае за подробный ответ ;)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)