Javascript Hide () и Show () не скрывает весь контент, как это должно - PullRequest
Новая
       12

Javascript Hide () и Show () не скрывает весь контент, как это должно

0 голосов
/ 16 марта 2012

У меня есть следующий код, который должен сначала изменить текст, если установлен флажок (который работает нормально), а затем, ПОКАЗАТЬ div с выпадающими списками.Если этот флажок снят, то он должен снова скрывать div.

Проблема заключается в том, что div содержит выпадающий список, созданный с помощью JavaScript, который позволяет добавлять / удалять поля в зависимости от их необходимости.

Если вы протестируете его, вы заметите, что, когда вы установите флажок и затем нажмите «Добавить страну», затем снова снимите флажок, «Добавить страну» исчезнет, ​​но сгенерированные выпадающие списки не исчезнут.

Есть ли способ также снова скрыть выпадающие списки, если флажок снят снова?

Вот код:

http://jsfiddle.net/shannont/GpNdS/1/

Ответы [ 3 ]

1 голос
/ 16 марта 2012

Ваш HTML-код недействителен. У вас есть 

<table>
   <div>
   ...
</table>

Ячейка <table> может содержать только теги tr / tbody / thead. Пустой элемент внутри таблицы будет «вытекать» из таблицы.

У вас также есть два закрывающих тега </table> ниже, но открыт только один тег <table>.

Сначала исправьте ваш html. Очистите его, чтобы он был более разборчивым - не вставляйте блоки скриптов в середину разметки. Это сбивает с толку и трудно читать.

1 голос
/ 16 марта 2012

Ваш браузер автоматически исправляет ваш синтаксически неверный HTML.Вы не можете поместить div и изображения в таблицу.Вы должны поместить в ряды и ячейки сначала.Затем страница разрывается, потому что javascript не нацелен на то, на что, по вашему мнению, он нацелен. 

  <table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
       <div id="detailedID" style="display: none;">
           <img src="http://placehold.it/30x30" title="Add Row" border="0" onclick="addRowToCountryPrice('',''); return false;">
       <a href="" onclick="addRowToCountryPrice('',''); return false;">Add a Country</a>
       <input type="hidden" name="TotalLinesCountry" id="TotalLinesCountry">

Пример исправления: 

  <table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
    <tr>
       <td><div id="detailedID" style="display: none;"></td>
    </tr>
  </table>

Возможно, вы не хотите использовать таблицухотя на всех.Поэтому я бы порекомендовал извлечь это и заменить его на div.Тогда ваш код, вероятно, будет работать.

0 голосов
/ 16 марта 2012

Ну, даже если это беспорядок, просто поставьте 

<div id="detailedID" style="display: none;">

Перед столом.

...