Я пытаюсь создать приложение, которое генерирует пользовательский элемент списка, который будет динамически отображаться на экране (например, обновление списка контактов), и имеет следующий код, который довольно хорошо работает как в IE, так и в Firefox.
<html>
<head>
<style type="text/css">
.divCss table{
width:100%;
height:130px;
}
.divCss {
width:100%;
height:100%;
border:solid 1px #c0c0c0;
background-color:#999000;
font-size:11px;
font-family:verdana;
color:#000;
}
.divCss table:hover{
background-color :#FF9900;
}
</style>
<script type="text/javascript" language="javascript">
var elementCounts = 0;
function myItemClicked(item)
{
alert("item clicked:"+item.id);
}
function createItem()
{
var pTag = document.createElement("p");
var tableTag = document.createElement("table");
tableTag.id = "" + (elementCounts++);
tableTag.setAttribute("border","1");
tableTag.setAttribute("cellpadding","5");
tableTag.setAttribute("width","100%");
tableTag.setAttribute("height","130px");
tableTag.onclick = function() {myItemClicked(this);};
var tBody = document.createElement("tbody");
var tr1Tag = document.createElement("tr");
var tdImageTag = document.createElement("td");
tdImageTag .setAttribute("width","100px");
tdImageTag .setAttribute("rowspan","2");
var imgTag = document.createElement("img");
imgTag.setAttribute("width","100px");
imgTag.setAttribute("height","100px");
imgTag.id = "avatar";
tdImageTag .appendChild(imgTag);
var tdTextTag= document.createElement("td");
tdTextTag.setAttribute("height","30%");
tdTextTag.setAttribute("nowrap","1");
tdTextTag.setAttribute("style","font-weight: bold; font-size: 20px;");
tdTextTag.id = "text";
tdTextTag.innerHTML = "text";
tr1Tag.appendChild(tdImageTag);
tr1Tag.appendChild(tdTextTag);
var tr2Tag = document.createElement("tr");
var tdAnotherTextTag = document.createElement("td");
tdAnotherTextTag.setAttribute("valign","top");
tdAnotherTextTag.id = "anotherText";
tdAnotherTextTag.innerHTML = "Another Text";
tr2Tag.appendChild(tdAnotherTextTag );
tBody.appendChild(tr1Tag);
tBody.appendChild(tr2Tag);
tableTag.appendChild(tBody);
tableTag.className ="divCss";
pTag.appendChild(tableTag);
document.getElementById("list").appendChild(pTag);
}
function clearList()
{
document.getElementById("list").innerHTML = "";
elementCounts = 0;
}
</script>
</head>
<body>
<input id="btn1" type="button" value="create item" onclick="createItem();" />
<input id="btn2" type="button" value="clear list" onclick="clearList();" />
<div id="list" class="divCss" style="overflow: scroll;"></div>
</body>
</html>
Этот код генерирует новый элемент таблицы при нажатии кнопки «Создать элемент» и добавляет его в элемент div на главной странице.
Элемент таблицы должен выглядеть следующим образом
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Приведенный выше код корректно отображается в Firefox, однако в IE, rowspan вроде как игнорируется и вывод выглядит как
+---------------+--------------------+
| Image with | Text |
|rowspan ignored| |
|---------------+--------------------|
| Another Text | |
| | |
+---------------+--------------------+
Может кто-нибудь помочь мне, почему это должно происходить? Я также проверил написание прямых тегов (вместо использования createElement и appendChild), и это работает, но динамическое генерирование кажется проблематичным. Я что-нибудь делаю здесь?
Кроме того, после добавления сгенерированных элементов таблицы в элемент div («список»), кажется, есть некоторый разрыв между последовательными элементами таблицы, и я не могу удалить его, даже если я задаю margin и padding как 0 в теге div ,
Любая помощь будет высоко ценится.
Спасибо.
РЕДАКТИРОВАТЬ: О разрыве между элементами таблицы внутри div.
Вот результат, как и ожидалось: (Это работает в jsfiddle, как предложено Shadow Wizard).
+------------------------------------+
| List Element 1 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
| List Element 2 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
| List Element 3 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Вот вывод, который я получаю на Chrome, т. Е. Firefox ..
+------------------------------------+
| List Element 1 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Gap
+------------------------------------+
| List Element 2 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Gap
+------------------------------------+
| List Element 3 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Извините за объяснение таких вещей. Я не смог загрузить свои снимки. Однако вы можете увидеть разницу между jsfiddle и другими эффектами браузера, открыв страницу в виде html-файла в любом браузере.
EDIT (Shadow_Wizard) - вот скриншот: 