81,092
社区成员
发帖
与我相关
我的任务
分享js动态输出两个表格
各位大侠，最近在做一个账单，前台用jsp
账单左右两边各一个表格，填充完第一个表格自动填充第二个表格，而且两个表格的单元数是相同的 比如从java后台传过来一个json数组共6条数据，（后台传的数据是动态的）第一个表格放3条，第二个表格放3条，，请问用js怎么输出呢，
账单左右两边各一个表格，填充完第一个表格自动填充第二个表格，而且两个表格的单元数是相同的 比如从java后台传过来一个json数组共6条数据，（后台传的数据是动态的）第一个表格放3条，第二个表格放3条，，请问用js怎么输出呢，
...全文
请发表友善的回复…
发表回复
yyfhz 2015-05-18
- 打赏
- 举报
<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>
csdn2014517 2015-05-18
- 打赏
- 举报
两个表格的td加上id，JS获取然后赋值。。。
sugarTan 2015-05-18
- 打赏
- 举报
<!-- 我这里只有一个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);
}
微笑的活着 2015-05-18
- 打赏
- 举报
不固定，是根据后台数据的长度判断的
微笑的活着 2015-05-18
- 打赏
- 举报
分享下 ： 比如后台传过来的是10条数据， 那么 第一个表格 就放前5条，后面的表格放后5条， 如果是奇数的话 第一个放length/2t条 第二个表格放leng/2+1条 这样就可以搞定了
微笑的活着 2015-05-18
- 打赏
- 举报
谢谢您的解答 这个问题已经解决了，
微笑的活着 2015-05-17
- 打赏
- 举报
有大神 给说下 纠结了好长时间了
Inhibitory 2015-05-17
- 打赏
- 举报
可以看看jQuery，会JS的话jQuery很快就学会了，jQuery生成DOM元素很方便。
Inhibitory 2015-05-17
- 打赏
- 举报
可以看看jQuery，会JS的话jQuery很快就学会了，jQuery生成DOM元素很方便。
米带 2015-05-17
- 打赏
- 举报
你也没说清楚啊，你的表格的行数是固定的吗？
微笑的活着 2015-05-17
- 打赏
- 举报
两个表格是并排的，一个在左边，一个在右边，
微笑的活着 2015-05-17
- 打赏
- 举报
自己顶一下 顶
