java 统计报表js,js动态输出两个报表

该博客讨论了如何使用JavaScript来动态创建两个表格,并根据从Java后台传来的JSON数组数据填充它们。每个表格的行数根据数据的长度动态调整,例如,如果有6条数据,第一个表格显示前3条,第二个表格显示剩余的3条。示例代码中展示了如何构建HTML表格字符串,并使用jQuery将表格插入到页面中。
摘要由CSDN通过智能技术生成

js动态输出两个表格

本帖最后由 hanhanhu1230 于 2015-05-17 01:17:43 编辑

各位大侠,最近在做一个账单,前台用jsp

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

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

你也没说清楚啊,你的表格的行数是固定的吗?

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

可以看看jQuery,会JS的话jQuery很快就学会了,jQuery生成DOM元素很方便。

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

/** result是后台传过来的一个JS对象,result.dataList封装了个数组,你可以改成dataList1为第一个表格的数据,dataList2为第2个表格的数据 */

function reflashTable(result){

// 用JS来拼html语言,拼出一个Table

var strTb="";

strTb+='

列表信息';

strTb+='

';

strTb+='

ID';

strTb+='

昵称';

//strTb+='

姓名';

strTb+='

XXXX';

strTb+='

X币';

strTb+='

IP';

strTb+='

XX时间 ↑';

strTb+='

最近XX ↑';

strTb+='

最近ZZ ↑';

strTb+='

操作';

strTb+='

';

var dataList = result.dataList;

for (var i=0; i

var data = dataList[i];

strTb+='

';

strTb+='

'+data.playerid+'';

strTb+='

'+getHtmlStr(data.nickname)+'';

//strTb+='

'+data.realname+'';

strTb+='

'+data.xx+'';

strTb+='

'+data.xxb+'';

strTb+='

'+data.ip+'';

strTb+='

'+data.xxTimeDesc+'';

strTb+='

'+data.lastxxtimeDesc+'';

strTb+='

'+data.zzDesc+'';

strTb+='

';

strTb+='详情

';

strTb+='

';

}

// 这里用到了JQuery语言的查找元素,再把table写到页面

$(".datalistTable").html(strTb);

}

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

row:

col:

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

tbl.insertRow();

}

var row = tbl.rows[rowIdx];

var cell;

while (row.cells.length

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

alert('cell not exists');

return;

}

var row = tbl.rows[rowIdx];

if (row.cells.length

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;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值