Back for this rather old problem about stacked paged display xml nodes on three columns.
The original question was raised up here:
three records at once xml mobile pagination on xslt
Thing is that here,
xpath predicate to limit xml nodes display
for being very glad of the way display was provided I totally forget about pagination mechanism.
I mean there were a great need for a couple of js functions (at least) to be bound over the pagination links in order for these to work.
But here is still another requirement (second one):
through this xml file (which I'll show it here in a sec) there are some sub-records associated with the principal ones. And as one will display in a couple of pictures, by clicking on some small [+] sign those sub-records will expand, thus showing them accordingly. That [+] sign turned into [-] sign. And when clicked again over that [-] sign those sub-records will collapse, the displaying only showing but principal node records.
The "pictures" are as follows:
|===========|---------------|-------------|------------|
| FNAME | Smith [+] | Ken [+] | Susan [+] |
|===========|---------------|-------------|------------|
| LNAME | Milton | Jackson | Arkland |
|===========|---------------|-------------|------------|
| AGE | 44 | 37 | 48 |
|===========|---------------|-------------|------------|
| ADDRESS |5th smmr st,mntb9th Pnfeld ave 34th Mansfield st
|===========|---------------|-------------|------------|
| CITY | Portland | Kelowna | Raleigh |
|===========|---------------|-------------|------------|
| << < 1/4 > >> |
|=======================================================
Fig. 1 First Page
- all sub-records collapsed; one could
notice that little [+] sign on the very
1'st line next over each and every name
|===========|---------------|-------------|------------|
| FNAME | George [+] | Ron [+] | Marie-Ann |
|===========|---------------|-------------|------------|
| LNAME | Bond | Davis | Spencer |
|===========|---------------|-------------|------------|
| AGE | 35 | 37 | 48 |
|===========|---------------|-------------|------------|
| ADDRESS |5th drive, mntb|12th Greenfld ave 273 Simpson square
|===========|---------------|-------------|------------|
| CITY | Albany | Pheonix | Oklahoma |
|===========|---------------|-------------|------------|
| << < 2/4 > >> |
|=======================================================
Fig. 2 Second Page
- by clicking over either links (< - prev , > - next
<< - first or >> - last) the records displaying
will push backward or forward conesequently
(sub-records still collapsed ...)
|==========|-------------|----------|-----------|------------|
| FNAME | Smith [-] |chld Name | Ken [+] | Susan [+] |
|==========|-------------|----------|-----------|------------|
| LNAME | Milton | Smith | Jackson | Arkland |
|==========|-------------|----------------------|------------|
| AGE | 44 |chld Sname| 37 | 48 |
|==========|-------------|----------|-----------|------------|
| ADDRESS |5th smmr st, Terry Mansfield st |
|==========|-------------|-------- |-----------|------------|
| CITY | Portland |chld age | Kelowna | Raleigh |
|==========|-------------|----------|-----------|------------|
| << < 1/4 > >> |
|=============================================================
Fig. 3 First Page with vertically sub-records expanded
- on the first page (Fig.1) by clicking over that
[+] sign on top of every table's column header
those corresponding sub-records (children stuff)
wil get expanded (but vertically !) and be shown as such
The xml file is this:
<persns>
<prsn>
<fname>Smith</fname>
<lname>Milton</lname>
<age>44</age>
<addrss>5th summer st, mntb</addrss>
<city>Portland</city>
<children>
<child>
<name>Smith</name>
<sname>Terry</sname>
<c_age>12</c_age>
</child>
</children>
</prsn>
<prsn>
<fname>Ken</fname>
<lname>Jackson</lname>
<age>37</age>
<addrss>19th Penfield ave, brtcl</addrss>
<city>Kelowna</city>
<children>
<child>
<name>Jackson</name>
<sname>Grace</sname>
<c_age>8</c_age>
</child>
</children>
</prsn>
<prsn>
<fname>Susan</fname>
<lname>Arkland</lname>
<age>48</age>
<addrss>34th Mansfield st, sgtp</addrss>
<city>Raleigh</city>
<children>
<child>
<name>Patton</name>
<sname>Don</sname>
<c_age>14</c_age>
</child>
<child>
<name>Arkland</name>
<sname>Rob</sname>
<c_age>11</c_age>
</child>
</children>
</prsn>
<prsn>
<fname>George</fname>
<lname>Bond</lname>
<age>35</age>
<addrss>5th drive, mntb</addrss>
<city>Albany</city>
<children>
<child>
<name>Bond</name>
<sname>Areene</sname>
<c_age>10</c_age>
</child>
</children>
</prsn>
<prsn>
<fname>Ron</fname>
<lname>Davis</lname>
<age>37</age>
<addrss>12th Greenfield ave, brtcl</addrss>
<city>Pheonix</city>
<children/>
</prsn>
<prsn>
<fname>Marie-Ann</fname>
<lname>Spencer</lname>
<age>48</age>
<addrss>273 Simpson square</addrss>
<city>Oklahoma</city>
<children>
<child>
<name>Spencer</name>
<sname>David</sname>
<c_age>16</c_age>
</child>
<child>
<name>Spencer</name>
<sname>Tina</sname>
<c_age>13</c_age>
</child>
</children>
</prsn>
<prsn>
<fname>David</fname>
<lname>Rhonson</lname>
<age>45</age>
<addrss>255 Lakeland Terrace, mi</addrss>
<city>Livonia</city>
<children/>
</prsn>
<prsn>
<fname>Buddy</fname>
<lname>Clark</lname>
<age>53</age>
<addrss>Lkeshore Lane
Zion, il</addrss>
<city>Oneonta</city>
<children>
<child>
<name>Clark</name>
<sname>Susan</sname>
<c_age>17</c_age>
</child>
<child>
</children>
</prsn>
<prsn>
<fname>Peggy</fname>
<lname>Johnson</lname>
<age>42</age>
<addrss>w.Devon ave.
Monroe Township, nj</addrss>
<city>New Jersey</city>
<children>
<child>
<name>Friedmann </name>
<sname>Joseph </sname>
<c_age>17</c_age>
</child>
<child>
<name>Johnson</name>
<sname>Denise </sname>
<c_age>14</c_age>
</child>
</children>
</prsn>
<prsn>
<fname>Julie</fname>
<lname>Nelson</lname>
<age>35</age>
<addrss>Wagon st.
Springfield,pa</addrss>
<city>Pennsylvania</city>
<children>
<child>
<name>Nelson</name>
<sname>Patrick</sname>
<c_age>9</c_age>
</child>
<child>
</children>
</prsn>
</persns>
And the corresponding stylesheet is this:
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:param name="pag" select="1"/>
<xsl:param name="frme" select="3"/>
<xsl:template match="/persns">
<xsl:variable name="start" select="($pag - 1) * $frme + 1"/>
<xsl:variable name="rec" select="prsn[position() ge $start and position() lt $start + $frme]"/>
<table border="1">
<xsl:for-each select="$rec[1]/*">
<xsl:variable name="i" select="position()"/>
<tr><th>
<xsl:value-of select="name()"/>
</th>
<xsl:for-each select="$rec">
<td>
<xsl:value-of select="*[$i]"/>
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
And the last part will be the js functions which should be bound over the pagination links/buttons for the whole process kicked off.
So, the two requirements on brief :
vertical expand/collapse of xml sub-records when clicked over those [+]/[-] signs
pagination mechanism (through some js) which allows moving backwards / forwards
Really hope I made myself clear enough for one to Really understand my needs.
Thank you very much and please you guys help me with all these
Related
I have a ui grid where i require to merge some of the middle columns. It should look something like below :
Name | Address | Comment | Job | College | Married
----------------------------------------------------------
Keshvi | India | New | Not applicable | No
----------------------------------------------------------
I am currently using rowTemplate.
function rowTemplate() {
return ' <div ng-repeat="(colRenderIndex, col) in grid.appScope.customiseRowsDeletedBy(colContainer.renderedColumns) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
' <div class="other-override-background" >{{row.entity.job}}</div>' +
' <div ng-repeat="(colRenderIndex, col) in [colContainer.renderedColumns[5]]) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ng-style="{position:\'absolute\, display:\'block\'}" ui-grid-cell ></div>'
'</div>';
}
$scope.customiseRowsDeletedBy = (arr) => arr.slice(0, 2);
however, my output looks something this :
Name | Address | Comment | Job | College | Married
----------------------------------------------------------
Keshvi | India | New | Not applicable |
----------------------------------------------------------
No
----------------------------------------------------------
The third div shifts the content down.
Any idea how to go about?
TableData objects have a property called 'ColSpan' that you can use.
document.getElementById("myTd").colSpan = "2";
I'm not too familiar with rowTemplate but perhaps it has a similar property.
I want to sort my table columns by angular-dataTables. However, it sort the productCurrency because of 'ng-if' first then only to sort the productType. Any suitable function of dataTable can sort the table correctly? Check my output:
My Output:
|Product |
|CHN Product1|
|USD Product1|
|ABC |
|BBC |
|BBC |
|ZBC |
Expected Output:
|Product |
|ABC |
|BBC |
|BBC |
|CHN Product1|
|USD Product1|
|ZBC |
You can see it was supposed to sort product by alphabet, but it sort by currency 1st then the product type.
(Edited) PS: USD & CHN is productCurrency; Product1, ABC, BBC, ZBC is productType.
Here are my code:
ViewUserType.html
<td>
<span ng-if="ctrl.productType='ABC'" translate="ctrl.productCurrency.translateKey"> {{ctrl.productCurrency}}</span>
<span translate="ctrl.product.type.translateKey">{{ctrl.productType}}</span>
</td>
Controller.js
ctrl.dtOptions = DTOptionsBuilder.newOptions().withOption('aaSorting', [[2, 'desc'], [1, 'desc']]).withOption('pageLength', 25);
I'm trying to get an ascii art to be properly rendered by my React application.
After jsx-transformer is executed my art looses the format and renders pretty strange in the browser
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<pre>
<code>
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
Output:
If I remove react and add the pre code block directly to the html everything works fine.
Am I doing anything wrong here? Any help appreciated...
UPDATE 1: I cannot edit the ascii art.
UPDATE 2: I receive the art as a markdown file:
+--------+ +-------+ +-------+
| | --+ ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
After the markdown transformation to HTML this is the string I have:
<pre><code>+--------+ +-------+ +-------+
| | --+ ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code></pre>
I'm still using a JSX-loader to convert the HTML to JSX. The flow is markdown -> html -> jsx
So I ended up creating an issue in Github and Ben recommended to switch to Babel.
Here is the updated code that works just fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var App = React.createClass({
render: function() {
return (
<pre>
<code>{`
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
`}</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
Actually adding the {` ... `} works with jsx-transformer. But I'm not sure why it works.
UPDATE: It works because of template literals. Their recommendation is to use babel regardless because JSXTransformer has been deprecated.
If you're stuck with inseparable tags and ASCII you can use dangerouslySetInnerHTML:
var App = React.createClass({
render: function() {
// My representation of your input ASCII you get from elsewhere
var inputASCII = [
"<pre><code>+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
"</code></pre>",
].join('\n');
// dangerouslySetInnerHTML expects an object like this:
var wrappedASCII = {__html: inputASCII };
return <span dangerouslySetInnerHTML={wrappedASCII}></span>;
}
});
https://jsfiddle.net/yy31xqa3/5/
This functionality is mainly provided for cooperation with DOM string manipulation libraries
Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack.
https://facebook.github.io/react/tips/dangerously-set-inner-html.html
Only use this solution if you trust the source of the ASCII not to inject <script> tags or other malicious HTML.
Try adding \n characters between lines before hand:
var App = React.createClass({
render: function() {
var ascii = [
"+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
].join('\n');
return (
<pre>
<code>
{ascii}
</code>
</pre>
);
}
});
https://jsfiddle.net/yy31xqa3/
Try manually adding a linebreak to the end of each line, ex:
+--------+ +-------+ +-------+<br>
| | + ditaa + | |<br>
| Text | +-------+ |diagram|<br>
|Document| |!magic!| | |<br>
| | | | | |<br>
+---+----+ +-------+ +-------+
There is a rather challenging task to implement, which broke my mind completely. Maybe someone will advise how to generate the algorithm based on the following description.
Objective
I have a single container with blocks of static width say 150px. The width of the container for desktop devices is say 600px and for mobile devices is 450px. This means that in the desktop version I have 4 blocks in a row and in the mobile version there are 3 blocks in a row. To complete all space left in a row (if any) I need to add placeholders which look like other blocks but with no content and of different colour. The number of added placeholders should always be the same but some should be hidden in the desktop version and some should be hidden in the mobile version. I need to use CSS for hiding and displaying the placeholders on different screens and JavaScript for adding placeholders on page load.
Examples
Consider the following markup for 5 blocks with content and 3 placeholders:
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<article>Article 4</article>
<article>Article 5</article>
<span>Placeholder 1</span>
<span class="mobile-hide">Placeholder 2</span>
<span class="mobile-hide">Placeholder 3</span>
</section>
DEMO: http://jsfiddle.net/5qpsj/
Here I have 1 basic placeholder and 2 placeholders that are hidden on mobile screens. However if the number of content blocks is 4, then the combination of placeholders becomes different, displaying only 2 placeholders that must be hidden on desktop screens:
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<article>Article 4</article>
<span class="desktop-hide">Placeholder 1</span>
<span class="desktop-hide">Placeholder 2</span>
</section>
DEMO: http://jsfiddle.net/5qpsj/1/
I have tried different number of content blocks and created the following table of possible combinations:
---------------------------------------------------------------------
| Blocks | Placeholders | <no class> | .mobile-hide | .desktop-hide |
---------------------------------------------------------------------
| 0 | 4 | 3 | 1 | 0 |
| 1 | 3 | 2 | 1 | 0 |
| 2 | 2 | 1 | 1 | 0 |
| 3 | 1 | 0 | 1 | 0 |
| 4 | 2 | 0 | 0 | 2 |
| 5 | 3 | 1 | 2 | 0 |
| 6 | 2 | 0 | 2 | 0 |
| 7 | 3 | 0 | 1 | 2 |
| 8 | 1 | 0 | 0 | 1 |
| 9 | 3 | 0 | 3 | 0 |
| 10 | 2 | 2 | 0 | 0 |
| 11 | 1 | 1 | 0 | 0 |
| 12 | 0 | 0 | 0 | 0 |
| 13 | 3 | 2 | 1 | 0 |
| ... | ... | ... | ... | ... |
---------------------------------------------------------------------
Starting from 13 blocks the combinations remain the same as for 1 block, 2 blocks, etc. Personally I don't see any pattern in these numbers, which stops me from writing appropriate algorithm for adding placeholders and setting the required classes on page load.
Of course I could hard code the values from 0 to 12 number of blocks, or use approach which checks the width of the container on page resize and add/remove required number of placeholders (performs badly!), but my aim is to generate the code, which does all this job once on load, and then rely on CSS only.
So basically, something like that:
for (var i = 0; i < [number_of_placeholders]; i++) {
var placeholder = document.createElement('span');
if ([condition]) {
placeholder.className = 'mobile-hide';
}
if ([condition]) {
placeholder.className = 'desktop-hide';
}
section.appendChild(placeholder);
}
Do you have any ideas?
So, here is my approach. Feel free to replace the jQuery bits with VanillaJS. You could probably get a bit cleverer with the placeholders needed and calculate whether there are some shared among desktop and mobile. I just added them separately and would let CSS take care of that. See my example here http://jsfiddle.net/yThng/ (add more .blocks and run again to see that it works):
function generatePlaceholders(){
var mobileRowCount = 3, // blocks per row on mobile
desktopRowCount = 4, // blocks per row on desktop
// how many blocks are there?
blockCount = $('.block').length,
// how many placeholders on mobile/desktop needed
mobilePlaceholders = 0,
desktopPlaceholders = 0,
// iterator
i;
// use modulo to see if there are rows that are not filled (on mobile)
if( blockCount%mobileRowCount > 0 ){
// if there are, calculate how many placeholders needed
mobilePlaceholders = mobileRowCount - blockCount%mobileRowCount;
}
// same as above, but for desktop
if( blockCount%desktopRowCount > 0 ){
desktopPlaceholders = desktopRowCount - blockCount%desktopRowCount;
}
// append needed desktop placeholders
for( i=0; i < desktopPlaceholders; i++ ){
$('#container').append('<div class="desktop-only-placeholder" />');
}
// append need mobile placeholders
for( i=0; i < mobilePlaceholders; i++ ){
$('#container').append('<div class="mobile-only-placeholder" />');
}
}
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>
<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>
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;}