你的分享就是我们的动力 ---﹥

js动态输出两个报表

js动态输出两个表格
本帖最后由 hanhanhu1230 于 2015-05-17 01:17:43 编辑
各位大侠,最近在做一个账单,前台用jsp

账单左右两边各一个表格,填充完第一个表格自动填充第二个表格,而且两个表格的单元数是相同的 比如从java后台传过来一个json数组共6条数据,(后台传的数据是动态的)第一个表格放3条,第二个表格放3条,,请问用js怎么输出呢,



------解决思路----------------------
你也没说清楚啊,你的表格的行数是固定的吗?
------解决思路----------------------
可以看看jQuery,会JS的话jQuery很快就学会了,jQuery生成DOM元素很方便。
------解决思路----------------------

<!-- 我这里只有一个datalistTable,你可以改成:datalistTable1为第一个table,datalistTable2为第2个table -->
<table class="datalistTable" align="center" style="width:950px;"></table>





/** result是后台传过来的一个JS对象,result.dataList封装了个数组,你可以改成dataList1为第一个表格的数据,dataList2为第2个表格的数据 */
function reflashTable(result){
// 用JS来拼html语言,拼出一个Table
var strTb="";
strTb+='<caption>列表信息</caption>';
strTb+='<tr onclick="trClick(this)">';
strTb+= '<th>ID</th>';
strTb+= '<th style="width:150px;">昵称</th>';
//strTb+= '<th style="width:50px;">姓名</th>';
strTb+= '<th style="width:100px;">XXXX</th>';
strTb+= '<th style="width:80px;">X币</th>';
strTb+= '<th style="width:100px;">IP</th>';
strTb+= '<th width="120px" >XX时间<span class="headHand" id="head_registetime">↑</span></th>';
strTb+= '<th width="120px" >最近XX<span class="headHand" id="head_registetime">↑</span></th>';
strTb+= '<th width="120px" >最近ZZ<span class="headHand" id="head_registetime">↑</span></th>';
strTb+= '<th width="35px" >操作</th>';
strTb+='</tr>';
var dataList = result.dataList;
for (var i=0; i<dataList.length; i++) {
var data = dataList[i];
strTb+='<tr>';
strTb+='<td class="number">'+data.playerid+'</td>';
strTb+='<td>'+getHtmlStr(data.nickname)+'</td>';
//strTb+='<td>'+data.realname+'</td>';
strTb+='<td class="number chips" title="XX">'+data.xx+'</td>';
strTb+='<td class="number chips" title="X币">'+data.xxb+'</td>';
strTb+='<td style="width:95;">'+data.ip+'</td>';
strTb+='<td title="XX时间(北京时间)">'+data.xxTimeDesc+'</td>';
strTb+='<td title="XX时间(北京时间)">'+data.lastxxtimeDesc+'</td>';
strTb+='<td title="最后XX时间(北京时间)" name="'+data.zztime+'">'+data.zzDesc+'</td>';
strTb+='<td style="text-align:center;">';
strTb+= '<a href="javascript:void(0)" onclick="playerDtl(\''+data.playerid+'\', \''+getJsStr(data.nickname)+'\', this, event)" >详情</a></td>';
strTb+='</tr>';
}

// 这里用到了JQuery语言的查找元素,再把table写到页面
$(".datalistTable").html(strTb);
}

------解决思路----------------------

<html>
<Table id='myTable' border='1'>
</Table>
<br>
row:<input type='text' id='rowIndex'>
col:<input type='text' id='colIndex'>
<input type='button' value='create cell' onclick='createCell()'>
<input type='button' value='get cell value' onclick='getCellValue()'>
<input type='text' id='cellValue'>
<input type='button' value='set cell value' onclick='setCellValue()'>
<script language='javascript'>
function createCell() {
var rowIdx = rowIndex.value-0;
var colIdx = colIndex.value-0;
if ((rowIdx<0) 
------解决思路----------------------
 (colIdx<0)) {
alert('invalid cell index');
return;
}
var tbl = myTable;
while (tbl.rows.length<rowIdx+1) {
tbl.insertRow();
}
var row = tbl.rows[rowIdx];
var cell;
while (row.cells.length<colIdx+1) {
cell = row.insertCell();
cell.innerText=' ';
}
}

function getCellValue() {
var rowIdx = rowIndex.value-0;
var colIdx = colIndex.value-0;
if ((rowIdx<0) 
------解决思路----------------------
 (colIdx<0)) {
alert('invalid cell index');
return;
}
var tbl = myTable;
if (tbl.rows.length<rowIdx+1){
alert('cell not exists');
return;
}
var row = tbl.rows[rowIdx];
if (row.cells.length<colIdx+1) {
alert('cell not exists');
return;
}
var cell = row.cells[colIdx];
alert(cell.innerText);
}

function setCellValue() {
var rowIdx = rowIndex.value-0;
var colIdx = colIndex.value-0;
var v=cellValue.value;
if ((rowIdx<0) 
------解决思路----------------------
 (colIdx<0)) {
alert('invalid cell index');
return;
}
createCell();
var tbl = myTable;
var row= tbl.rows[rowIdx];
var cell = row.cells[colIdx];
cell.innerText = v;
}


</script>
</html>