Hi all,
I'm using live writer for posting.
I have a very large table with a lot of content. When updating this post it moves all my older post to the bottom.
So my idea was to add javascript to the html sorce to toogle the table.
Unfortunately everytime I swith to the design mode to handy expand the table live writer converts my code into ____.
is there a solution for that to mask code something loke "unfoltered html"?
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
tr.contentRows {
display: none;
}
</style>
</head>
<script type="text/javascript">
var rowVisible = false;
/* toggle the display state of contentRows for a given table*/
function toggleDisplay(tbl)
{
//get css rules we want to toggle, workaround for IE: lowercase
fooRule = getCSSStyleByName("tr.contentrows");
//iterate over the table and change the style
var tblRows = document.getElementById(tbl).rows;
for (i = 0; i < tblRows.length; i++)
{
if (tblRows[i].className != 'headerRow')
{
fooRule.style.display = (rowVisible) ? 'none' : '';
}
}
rowVisible = !rowVisible;
}
/* return a css style for a given name*/
function getCSSStyleByName(cssStyle)
{
var fooSheet = document.styleSheets[0];
var fooRules = fooSheet.cssRules ? fooSheet.cssRules : fooSheet.rules;
for (i=0; i<fooRules.length; i++)
{
if(fooRules[i].selectorText.toLowerCase() == cssStyle)
{ //break if we found the rule
targetRule = fooRules[i]
break;
}
}
return targetRule;
}
</script>
<body>
<table id="theTable" border="1">
<tr class="headerRow">
<th>test header</th>
<th>test header</th>
<th>test header</th>
</tr>
<tr class="contentRows">
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr class="contentRows">
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr class="contentRows">
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr class="contentRows">
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
<input value="ToggleMe" type="button" onclick="toggleDisplay('theTable')"/>
</body>
</html>
