AjaxPro取后台数据动态显示表格
<style type="text/css">
#apDiv1 { Z-INDEX: 1; LEFT: 10%; BORDER-BOTTOM-COLOR: #333333; WIDTH: 60%; POSITION: relative; HEIGHT: 100%; BACKGROUND-COLOR: #cccccc } #tbody { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BACKGROUND-COLOR: #6e6e6e; TEXT-ALIGN: left } </style>
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#large").tableSorter();
});
</script>
<script language="javascript" type="text/javascript">
function ShowData()
{
var tableData=AjaxProPractise.WebForm1.GetData().value;
var tb1,tbd,tr,td;
var theads;
var maxrow=tableData.Rows.length;
var maxcol=tableData.Columns.length; //success
tb1= document.getElementById("large");
theads=document.createElement("thead");
tb1.appendChild(theads);
for(var i=0;i<1;i++)
{
tr= document.createElement("tr");
theads.appendChild(tr);
for(var col_count=0;col_count<maxcol;col_count++)
{
td=document.createElement("td");
td.innerHTML=tableData.Columns[col_count].Name;//
tr.appendChild(td);
}
}//tbd= document.createElement("tbody"); // tb1.appendChild(tbd);
tbd= document.getElementById("TBody0");
for(var row_count=0;row_count<tableData.Rows.length;row_count++)
{
tr= document.createElement("tr");
tbd.appendChild(tr);
for(var col_count=0;col_count<tableData.Columns.length;col_count++)
{
td=document.createElement("td");
var colNa=tableData.Columns[col_count].Name;//取到列名了
var value= tableData.Rows[row_count][tableData.Columns[col_count].Name];
td.innerHTML=value;
tr.appendChild(td);
}
}
// var taTotal= document.getElementById("taTotal");
var totalNum=0;
var bodyTotal=document.getElementById("bodyTotal"); //total
tr= document.createElement("tr");
bodyTotal.appendChild(tr);
for(var col_count=0;col_count<tableData.Columns.length;col_count++)
{
td=document.createElement("td");
if(col_count==0)
td.innerHTML='合计';
else
{
var value= tableData.Rows[0][tableData.Columns[col_count].Name]; //judge the value type(number)
if(typeof value=='number'&&value.constructor==Number)//the value is number
{
for(var row_count=0;row_count<tableData.Rows.length;row_count++)
{
totalNum=tableData.Rows[row_count][tableData.Columns[col_count].Name]+totalNum;
td.innerHTML=totalNum;
}
}
else
td.innerHTML=' ';
}
tr.appendChild(td);
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout" onload="ShowData();">
<form id="Form2" method="post" runat="server">
<div id="apDiv1" class="apDiv1" align="center" style="Z-INDEX: 101; LEFT: 160px; WIDTH: 60%; TOP: 48px; HEIGHT: 86.09%">
<table align="center" id='large' border='2' cellpadding='3' cellspacing='0' style='BORDER-RIGHT:#c1cdd8 1px solid; BORDER-TOP:#c1cdd8 1px solid; FONT-SIZE:9pt; BORDER-LEFT:#c1cdd8 1px solid; BORDER-BOTTOM:#c1cdd8 1px solid; BORDER-COLLAPSE:collapse'
width="100%">
<!--暂时没有数据-->
<tbody id='TBody0' class="tbody">
</tbody>
</table>
<table align="center" id='taTotal' border='2' cellpadding='3' cellspacing='0' style='BORDER-RIGHT:#c1cdd8 1px solid; BORDER-TOP:#c1cdd8 1px solid; FONT-SIZE:9pt; BORDER-LEFT:#c1cdd8 1px solid; BORDER-BOTTOM:#c1cdd8 1px solid; BORDER-COLLAPSE:collapse'
width="100%">
<!--暂时没有数据-->
<tbody id='bodyTotal' class="tbody">
</tbody>
</table>
</div>
<FONT face="宋体"></FONT>
</form>
</body>
#apDiv1 { Z-INDEX: 1; LEFT: 10%; BORDER-BOTTOM-COLOR: #333333; WIDTH: 60%; POSITION: relative; HEIGHT: 100%; BACKGROUND-COLOR: #cccccc } #tbody { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BACKGROUND-COLOR: #6e6e6e; TEXT-ALIGN: left } </style>
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#large").tableSorter();
});
</script>
<script language="javascript" type="text/javascript">
function ShowData()
{
var tableData=AjaxProPractise.WebForm1.GetData().value;
var tb1,tbd,tr,td;
var theads;
var maxrow=tableData.Rows.length;
var maxcol=tableData.Columns.length; //success
tb1= document.getElementById("large");
theads=document.createElement("thead");
tb1.appendChild(theads);
for(var i=0;i<1;i++)
{
tr= document.createElement("tr");
theads.appendChild(tr);
for(var col_count=0;col_count<maxcol;col_count++)
{
td=document.createElement("td");
td.innerHTML=tableData.Columns[col_count].Name;//
tr.appendChild(td);
}
}//tbd= document.createElement("tbody"); // tb1.appendChild(tbd);
tbd= document.getElementById("TBody0");
for(var row_count=0;row_count<tableData.Rows.length;row_count++)
{
tr= document.createElement("tr");
tbd.appendChild(tr);
for(var col_count=0;col_count<tableData.Columns.length;col_count++)
{
td=document.createElement("td");
var colNa=tableData.Columns[col_count].Name;//取到列名了
var value= tableData.Rows[row_count][tableData.Columns[col_count].Name];
td.innerHTML=value;
tr.appendChild(td);
}
}
// var taTotal= document.getElementById("taTotal");
var totalNum=0;
var bodyTotal=document.getElementById("bodyTotal"); //total
tr= document.createElement("tr");
bodyTotal.appendChild(tr);
for(var col_count=0;col_count<tableData.Columns.length;col_count++)
{
td=document.createElement("td");
if(col_count==0)
td.innerHTML='合计';
else
{
var value= tableData.Rows[0][tableData.Columns[col_count].Name]; //judge the value type(number)
if(typeof value=='number'&&value.constructor==Number)//the value is number
{
for(var row_count=0;row_count<tableData.Rows.length;row_count++)
{
totalNum=tableData.Rows[row_count][tableData.Columns[col_count].Name]+totalNum;
td.innerHTML=totalNum;
}
}
else
td.innerHTML=' ';
}
tr.appendChild(td);
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout" onload="ShowData();">
<form id="Form2" method="post" runat="server">
<div id="apDiv1" class="apDiv1" align="center" style="Z-INDEX: 101; LEFT: 160px; WIDTH: 60%; TOP: 48px; HEIGHT: 86.09%">
<table align="center" id='large' border='2' cellpadding='3' cellspacing='0' style='BORDER-RIGHT:#c1cdd8 1px solid; BORDER-TOP:#c1cdd8 1px solid; FONT-SIZE:9pt; BORDER-LEFT:#c1cdd8 1px solid; BORDER-BOTTOM:#c1cdd8 1px solid; BORDER-COLLAPSE:collapse'
width="100%">
<!--暂时没有数据-->
<tbody id='TBody0' class="tbody">
</tbody>
</table>
<table align="center" id='taTotal' border='2' cellpadding='3' cellspacing='0' style='BORDER-RIGHT:#c1cdd8 1px solid; BORDER-TOP:#c1cdd8 1px solid; FONT-SIZE:9pt; BORDER-LEFT:#c1cdd8 1px solid; BORDER-BOTTOM:#c1cdd8 1px solid; BORDER-COLLAPSE:collapse'
width="100%">
<!--暂时没有数据-->
<tbody id='bodyTotal' class="tbody">
</tbody>
</table>
</div>
<FONT face="宋体"></FONT>
</form>
</body>

浙公网安备 33010602011771号