js查询数据库后，table的折叠展开问题
js动态查询数据库后，需要在table里实现详细数据的展开和折叠功能。因为不知道如何动态定义id，所有点击那个+，都只能展开和折叠第一条记录，相关代码如下，请帮忙看看如何修改，以实现点击+后展开相对应的记录。或者有其它的思路实现此功能？谢谢！（图片为效果图）
代码如下：
function show()
{
if(document.getElementById("t").style.display=='none')
{
document.getElementById("t").style.display='table-row';
document.getElementById("d").style.display='block';
document.getElementById("a").innerHTML="-";
}
else
{
document.getElementById("t").style.display='none';
document.getElementById("d").style.display='none';
document.getElementById("a").innerHTML="+";
}
}
function connectDB()
{
var InfoSD = parent.myData.sendSD;
var InfoED = parent.myData.sendED;
try{
var conn=new ActiveXObject("ADODB.Connection");
var rs=new ActiveXObject("ADODB.Recordset");
var filePath = location.href.substring(0, location.href.indexOf("ReportQuery.htm"));
var path = filePath + "RBatch.mdb";
var path=path.replace('file:///','');
var connectString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+path;
var selectString="select * from ReportBatchList where DateTime>=#"+InfoSD+" 00:00:00# and DateTime<=#"+InfoED+" 23:59:59# ORDER BY DateTime DESC";
conn.open(connectString);
rs=conn.execute(selectString);
var tableString="";
while(!rs.EOF)
{
var Cdt = new Date(rs(0));
tableString+="<div>"
tableString+="<table border='1' cellpadding='0' cellspacing='0' style='margin:0px; border:1px; border-collapse:collapse; table-layout:fixed' bordercolor='#C0C0C0'>";
tableString+="<tr height='25'><td width='25' align='center' style='color: #00F; font-size: 20px;'><a id=a onclick=show(t) href='#'>+</a></td><td width='200'><a onclick='toExec(1)' href='#'>"+" "+Cdt+"</a></td><td width='500'>"+" "+rs(5)+"</td></tr>";
tableString+="<tr id=t style='display:none'><td>"+" "+"</td><td colspan='2'><div id=d style='display:none'>";
tableString+="<table border='1' cellpadding='0' cellspacing='0' style='margin:0px; border:1px; border-collapse:collapse; table-layout:fixed' bordercolor='#C0C0C0'>";
tableString+="<tr height='25'><td>FabCode</td><td>"+" "+rs(1)+"</td></tr>";
tableString+="<tr height='25'><td>BatchName</td><td>"+" "+rs(2)+"</td></tr>";
tableString+="<tr height='25'><td>BatchNub</td><td>"+" "+rs(3)+"</td></tr>";
tableString+="<tr height='25'><td>BatchTime</td><td>"+" "+rs(4)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(6)+"</td><td>"+" "+rs(7)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(8)+"</td><td>"+" "+rs(9)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(10)+"</td><td>"+" "+rs(11)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(12)+"</td><td>"+" "+rs(13)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(14)+"</td><td>"+" "+rs(15)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(16)+"</td><td>"+" "+rs(17)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(18)+"</td><td>"+" "+rs(19)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(20)+"</td><td>"+" "+rs(21)+"</td></tr>";
tableString+="<tr height='25'><td>"+" "+rs(22)+"</td><td>"+" "+rs(23)+"</td></tr>";
tableString+="</table></div></td></tr></table>";
tableString+="</div>";
rs.moveNext();
}
document.getElementById("dataArea").innerHTML=tableString;
rs.close();
conn.close;
效果图如下：
function show(id)
{
if(document.getElementById("t"+id).style.display=='none')
{
document.getElementById("t"+id).style.display='table-row';
document.getElementById("d"+id).style.display='block';
document.getElementById("a"+id).innerHTML="-";
}
else
{
document.getElementById("t"+id).style.display='none';
document.getElementById("d"+id).style.display='none';
document.getElementById("a"+id).innerHTML="+";
}
}
var id = 0
while(!rs.EOF)
{
/*更改所有带id的元素 如下*/
str+='<table id="t"' + id + '></table>'
str+='<a href="#" id="a"' + id + ' onclick="show(' + id + ')">举例</a>'
rs.moveNext();
id++
}
建议使用前端框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible=!visible">显示控制</el-button>
<el-table
:data="tableData"
border
height="400"
:show-header="!showheader"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<tbl :data="props.row.data" :showheader="!showheader"></tbl>
</template>
</el-table-column>
<el-table-column
label="COL1"
prop="date">
<template slot-scope="scope">
<div style="display:flex; flex-direction: column;">
<span @click="cube">显示表头{{scope.$index}}</span>
<span>{{scope.row.date}}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="COL2"
prop="desc">
</el-table-column>
</el-table>
<el-dialog :visible.sync="visible" title="显示控制">
隐藏表头<el-switch v-model="showheader"></el-switch>
</el-dialog>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let tableData = (()=>{
let child_table_data = ()=>{
return [{
name: '路人甲',
age: parseInt(Math.random()*61)
},{
name: '路人乙',
age: parseInt(Math.random()*61)
},{
name: '路人丙',
age: parseInt(Math.random()*61)
},]
}
let item = {
date: 'rs0',
desc: 'rs5',
}
return Array.apply(null, Array(32)).map(()=>Object.assign({data:child_table_data()}, item))
})()
</script>
</script>
<script>
let tbl = Vue.extend({
props: [
'data','showheader'
],
data(){
return {
search: null
}
},
methods:{
handleEdit(index, row){
console.log(index, row)
},
handleDelete(index, row){
console.log(index, row)
}
},
template: `
<div>
<el-table
border
:show-header="showheader"
:data="data.filter(data=>!search||data.name.indexOf(search)!=-1||data.age.toString().indexOf(search)!=-1)">
<el-table-column
type="index"
label="ID"
width="50">
</el-table-column>
<el-table-column label="NAME" prop="name">
</el-table-column>
<el-table-column label="AGE" prop="age">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
`
})
Vue.component("tbl", tbl)
new Vue({
el: '#app',
data() {
return {
showheader: true,
visible: false,
tableData,
}
},
methods: {
cube(){
this.visible = !this.visible
}
}
})
</script>
</html>