table setAttribute not working properly in IE
I am trying to build an application that generates a custom list item which will be displayed on the screen dynamicly(like contact list update), and have the following code which works pretty well on both IE and 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>
<scri开发者_如何学JAVApt 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>
This code generates a new table element on click of "create item" button and adds it inside a div element on the main page.
The table element is supposed to be like the following
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
The above code does showup properly on firefox, however on IE, the rowspan is kinda ignored and the output looks like
+---------------+--------------------+
| Image with | Text |
|rowspan ignored| |
|---------------+--------------------|
| Another Text | |
| | |
+---------------+--------------------+
Can anyone help me why this must be happening? I also checked writing direct tags ( instead of using createElement and appendChild), and that works, but the dynamic generation seems to be problamatic. Am I doing anything worng here?
Also, after adding the generated table elements in the div element ( "list" ), there seems to be some gap between consecutive table elements and am not able to remove it even if i specify margin and padding as 0 in div tag.
Any help would be much appreciated. Thanks.
EDIT: About the gap between table elements inside div. Here is the output as expected: ( This works in jsfiddle as suggessted by 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 |
| | |
+---------------+--------------------+
Here is the output that i get on chrome, ie, 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 |
| | |
+---------------+--------------------+
Sorry for explaining things like this. I was not able to upload my snapshots. However, you can see the difference between jsfiddle and other browser effects by opening the page as html file in any browser.
EDIT (Shadow_Wizard) - here is the screenshot:
In IE, the attributes are pretty limited and better be set "directly" and not via setAttribute.
Try this instead:
tdImageTag.rowSpan = 2;
Same for width and height: those better be set as part of the style:
imgTag.style.width = "100px";
imgTag.style.height = "100px";
Edit: by gaps do you mean the parts marked with red circles?
Edit II: if you see difference between jsFiddle and your own file it might mean you're missing DOCTYPE declaration. Try adding this line on top of your code, above the <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jsFiddle is adding such line by itself, you can View Source to see it.
Also, I saw you're running the file locally... that's also not good you better run it as part of website to simulate "real" web page.
Try tdImageTag.setAttribute("rowSpan","2"); - it needs to be the upper case S
The gaps between the table elements may happen because the default cellspacing try this code: tableTag.cellSpacing=0;
Also if you are using the strict mode you can set the cellspacing in the css:
table.divCss {border-spacing:0;}
加载中,请稍侯......
精彩评论