Mi_yan 2021-07-07 12:25 采纳率: 14.3%
浏览 92

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='#'>"+"&nbsp;"+Cdt+"</a></td><td width='500'>"+"&nbsp;"+rs(5)+"</td></tr>";
 tableString+="<tr id=t style='display:none'><td>"+"&nbsp;"+"</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>"+"&nbsp;"+rs(1)+"</td></tr>";
 tableString+="<tr height='25'><td>BatchName</td><td>"+"&nbsp;"+rs(2)+"</td></tr>";
 tableString+="<tr height='25'><td>BatchNub</td><td>"+"&nbsp;"+rs(3)+"</td></tr>";
 tableString+="<tr height='25'><td>BatchTime</td><td>"+"&nbsp;"+rs(4)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(6)+"</td><td>"+"&nbsp;"+rs(7)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(8)+"</td><td>"+"&nbsp;"+rs(9)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(10)+"</td><td>"+"&nbsp;"+rs(11)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(12)+"</td><td>"+"&nbsp;"+rs(13)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(14)+"</td><td>"+"&nbsp;"+rs(15)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(16)+"</td><td>"+"&nbsp;"+rs(17)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(18)+"</td><td>"+"&nbsp;"+rs(19)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(20)+"</td><td>"+"&nbsp;"+rs(21)+"</td></tr>";
 tableString+="<tr height='25'><td>"+"&nbsp;"+rs(22)+"</td><td>"+"&nbsp;"+rs(23)+"</td></tr>";
 tableString+="</table></div></td></tr></table>";
 tableString+="</div>";
 
 rs.moveNext();
 }
 document.getElementById("dataArea").innerHTML=tableString;
 rs.close();
 conn.close;

效果图如下：

img

  • 写回答

1条回答 默认 最新

  • Miseli 2021-07-09 16:05
    关注
    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>
    评论

报告相同问题？