Hola a todos tengo el siguiente problema ...
Genero un HTML con un script que me genera numeros para llenar una table y me funciona correctamente.
Le agrego el estilo de zebra con CSS y con un script externo, funciona bien pero solo para la primera pagina, les paso el codigo del HTML y del JS, espero me puedan ayudar a encontrar el problema.
Saludos
tbale.js
/ / / /
var i = 0, j;
function addRow(tableName, position, style) {
var tbody = $("#"+tableName+" > tbody")[0];
var rowNum = $("#"+tableName+" > tbody > tr").size();
var row = tbody.insertRow(position);
if(+rowNum<10)
{
if (+rowNum % 2==0)
$(row).css({'background-color':'#EEEEEE'});
}else{
$(row).css({'display':'none'});
}
var cell;
j = i+7;
for (; i < j; i++) {
cell = row.insertCell(-1);
$(cell).text(i);
}
}
////
ahora el html
<!-- XTML Struct Head -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="../../scui/0.4/js/jquery-1.3.2.min.js">
</script>
<!-- styles -->
<style type="text/css">
body {background-color:#DEDEDE; margin-top:15px; margin-left:15px; margin-right:15px; font-family:Arial; font-size:11px; color: #000000; min-width:700px;}
a {text-decoration: none; color: #3974b8; cursor:pointer}
a:hover, a:active, a:focus {color: #66cc00;}
th {background-color:#999999;color:#FFFFFF;font-weight:bold;height:22px;padding:0 6px;text-align:left;}
.tableContainer {background-color:#FFFFFF; border-color:#FF0000 #CCCCCC #CCCCCC; border-style:solid; border-width:0 1px 1px; overflow:hidden; padding:15px 5px 5px 15px;}
.leftSide{width:10%; float:left;}
.rightSide{width:90%; float:left;}
.rightSideContainer01{padding-left:50px;}
.rightSideContainer02{padding-left:50px;}
#bottomDiv{text-align:right; padding-top:5px; padding-bottom:5px;}
.oddRow {background-color:#EEEEEE; padding-left:5px;}
.chatContainer2 {border:1px solid #CCCCCC;min-width:556px;width:100%; text-align:left;}
.evenRow {background-color:#FFFFFF; padding-left:5px;}
.evonRow {background-color:#eeffff; padding-left:5px;}
td {height:30px;padding:2px 6px;}
.linkMenuContainer{border-bottom:1px dashed #CCCCCC; padding-top:5px; padding-bottom:5px;}
.white_thin_normal3 {color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration:none;}
.blue-background{background-color:#3B73B9;color:#FFFFFF;height:30px;}
.blue_bold_normal3 {color:#3B73B9;font-size:12px;font-weight:bold; margin-top:10px; margin-bottom:5px;}
.fullBorder {border:1px solid #CCCCCC;}
.bannerSetter {height:24px;margin-bottom:15px;padding:7px 0 0 13px;}
.buttonDiv{margin-top:5px;text-align:right;}
.clearDiv{clear:both;}
.blue_button {float:right;}
.bannerSetter {height:24px;margin-bottom:15px;padding:7px 0 0 13px;}
.blue_button a {background-color:#3B73B9;border:3px double #FFFFFF;color:#FFFFFF;cursor:pointer;:2px 25px;text-align:center;vertical-align:middle;white-space:nowrap;}
.blue_button a:hover {background-color:#95CE3C;color:#FFFFFF;}
.blue_button a:active {background-color:#95CE3C;color:#FFFFFF;}
a.blue_button {background-color:#3B73B9;border:3px double #FFFFFF;color:#FFFFFF;cursor:pointer;padding:2px 25px;text-align:center;vertical-align:middle;white-space:nowrap;}
a.blue_button:hover {background-color:#95CE3C;color:#FFFFFF;}
a.blue_button:active {background-color:#95CE3C;color:#FFFFFF;}
</style>
</head>
<body>
<div class="blue-background white_thin_normal3 fullBorder bannerSetter">Existing SPC Reports</div><!--Moderated Chat-->
<div class="tableContainer">
<div class="leftSide">
<div class="linkMenuContainer"><a href="#">Manage the form</a></div>
<div class="linkMenuContainer"><a href="#">Community home</a></div>
<div class="linkMenuContainer"><a href="#">View all records</a></div>
</div>
<div class="rightSide">
<div class="rightSideContainer01" id="div01">
<div id="tabCont-3" class="divWrapper centerContent3 noDisplay" style="display:block;">
<table id="testTable" class="chatContainer2 stripeMe" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="24%">SPC Report Name</th><!--SPC Repor Name it will take us to view Report-->
<th width="12%">View All</th><!--SPC Repor Name it will take us to view Report-->
<th width="12%">Latest Run</th><!-- It will show the last runs already performed -->
<th width="12%">Previous Run</th><!-- It will show the previous runs already performed -->
<th width="12%">Edit</th><!-- It will edit the Current SPC Report -->
<th width="12%">Delete</th><!-- It will delete the Current SPC Report -->
<th width="16%">Generate a Report</th><!-- It will delete the Current SPC Report -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="buttonDiv">
Current Page: <input id="currentPage" size="1" readonly="true"/> | <a id="lnkPrevious" href="#">Go To Previous Page</a> | <a id="lnkNext" href="#">Go To Next Page</a>
</div>
</div>
</div><div class="clearDiv"></div><br />
</div>
<div class="buttonDiv">
<a class="blue_button" href="#" id="">
<div>Build SPC Report</div>
</a>
</div>
<div class="clearDiv"></div><br />
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="table.js"></script>
<script>
<!--
$(document).ready(function () {
for (var a = 0; a < 120; a++){
if (a <= 9)
addRow('testTable', -1);
if (a >= 9)
addRow('testTable', -1, {'display':'none'});
}
$('#currentPage').attr('value', 0);
$("#lnkPrevious").click(function() {
goToPage('testTable', parseInt($("#currentPage").attr("value"))-1);
});
$("#lnkNext").click(function() {
goToPage('testTable', parseInt($("#currentPage").attr("value"))+1);
});
});
function goToPage(tableName, num) {
var lower, upper;
lower = num*10;
upper = (num+1)*10;
if (lower >= $("#"+tableName+" > tbody > tr").length)
return alert("Reached the end");
else if (lower < 0)
return alert("Reached the beginning");
for (var a = 0; a < $("#"+tableName+" > tbody > tr").length; a++) {
var row = $("#"+tableName+" > tbody > tr")[a];
if (lower <= a && a < upper) {
//$(row).css('display', 'table-row'); // This does not work in IE even though it is standard compliant. This breaks in any other browsers.
$(row).css('display', ''); // This is to support IE's display bug
}
else
$(row).css('display', 'none');
}
$('#currentPage').attr('value', num);
}
-->
</script>
</html>
