Свернуть / развернуть div в таблице? - PullRequest
2 голосов
/ 30 ноября 2010

Несколько дней назад я задал вопрос о сворачивании div ([текст ссылки] [fold-unold div]). Ответы, которые я получил, позволили мне добиться хороших результатов в моих усилиях по написанию кода. Однако мои требования изменились.

Будучи новичком во всем этом веб-контенте, я подумал, что завернуть div в таблицу и заголовки таблицы будет легко. Мальчик, я был неправ.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<style type="text/css" media="screen">
a            {text-decoration: none; color: black; }
#expand      {background-color: #fff;}
.description {display: none;         }
.entry       {margin: 0; padding: 0px;}
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".entry a").click(function() {
    $(this).parents('.entry').find('.description').slideToggle(1000);
});
});
</script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("wfr11", $con);
$result = mysql_query("
select title,description from webcases");
?>
<table border="1">
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<?php
while ($row = mysql_fetch_array($result)) {
?><div class="entry"><tr>
<td>
<a href="#expand"><?php echo htmlentities($row['title']); ?></a>
<div class="description"><?php echo htmlentities($row['description']); ?></div>
</td>
</tr></div>
<?php
}
mysql_close($con);
?>
</table>
</body>
</html>

Теперь нажатие на заголовок заявки не работает. Я удаляю весь код для таблицы, она отлично работает: нажмите на заголовок, и описание развернется

Я должен быть в состоянии сложить мой div (развернуть и описание) в мою таблицу, верно? Что мне не хватает?

1 Ответ

6 голосов
/ 30 ноября 2010

Крис, посмотрите здесь: http://jsfiddle.net/neopreneur/kdFHP/

Ваш HTML должен выглядеть следующим образом:

<table border="1">
    <thead>
        <tr>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="entry">
                <a href="#expand">Title Text (click here)</a>
                <div class="description">Description Text</div>
            </td>
        </tr>
    </tbody>
</table>
...