Я хочу создать таблицу, в которой каждая строка имеет расширяемую строку сведений. Смотрите ниже упрощенный пример кода. При щелчке строки в видимой таблице соответствующая строка из скрытой таблицы должна быть клонирована и вставлена ниже строки, по которой щелкнули, что создает эффект расширенной строки. Второй щелчок удаляет строку сведений.
Проблема заключается в том, что в IE8 (и, возможно, в других версиях) при расширении второй или третьей строки ширина столбцов изменяется. Первый ряд не делает. Разница заключается в длине содержимого в строке сведений. Просматривая этот же пример в Firefox 3.5, вы увидите, что столбцы сохраняют свою первоначальную ширину независимо от длины содержимого детали. Почему это происходит и как это можно исправить?
Прикрепленный jQuery - 1.2.6, но эффект должен быть одинаковым независимо от версии.
<html>
<head>
<style type="text/css">
table#primary {
width: 504px;
border-collapse: collapse;
}
table#primary,
table#primary tr,
table#primary th,
table#primary td, {
padding: 0;
margin: 0;
}
table#primary td {
border: 1px solid black;
}
td.time {
width: 100px;
}
td.title {
width: 300px;
}
td.room {
width: 100px;
}
table#secondary {
display: none;
}
</style>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table#primary tr").click(function() {
toggleDetails($(this));
});
});
function toggleDetails(row) {
if (row.hasClass("expanded")) {
hideDetails(row);
} else {
showDetails(row);
}
}
function showDetails(row) {
var id = row.attr("id");
var detailsRow = $("tr#details_" + id).clone(true);
detailsRow.insertAfter(row);
row.addClass("expanded");
}
function hideDetails(row) {
row.removeClass("expanded");
row.next().remove();
}
</script>
</head>
<body>
<table id="primary">
<thead>
<th>Time</th>
<th>Title</th>
<th>Room</th>
</thead>
<tbody>
<tr id="one">
<td class="time">11:00 am</td>
<td class="title">First</td>
<td class="room">101A</td>
</tr>
<tr id="two">
<td class="time">12:00 pm</td>
<td class="title">Second</td>
<td class="room">206A</td>
</tr>
<tr id="three">
<td class="time">1:00 pm</td>
<td class="title">Third</td>
<td class="room">103B</td>
</tr>
</tbody>
</table>
<table id="secondary">
<tbody>
<tr id="details_one">
<td colspan="3">Lorem ipsum one. Lorem ipsum one.</td>
</tr>
<tr id="details_two">
<td colspan="3">Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two.</td>
</tr>
<tr id="details_three">
<td colspan="3">Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three.</td>
</tr>
</tbody>
</table>
</body>
</html>