使用Grid布局动态创建表格-CSDN博客

本文链接：https://blog.csdn.net/Yuoliku/article/details/107200007

本文介绍了使用CSS Grid来制作表格的方法，包括如何根据数据动态调整行列，实现标题行，以及展示具体实现效果和后续的优化，如选中行背景色的改变。

使用grid制作一个简单表格

思考的问题

1.如何实现行列根据数据动态变化【先行后列】
2.如何实现标题行

开始实现

初始数据
                data:[{name:'张三',age:'24',height:'1.78'},{name:'李四',age:'20',height:'1.78'},{name:'王五',age:'21',height:'1.74'}],
                label:['姓名','年龄','身高']
  -----------------------------------------------------------------------------------------------------
    <div>
        <div class="lable-content">
            <div v-for="label in label" :key="label" ><!--用于渲染标题行 v-for都需绑定key值-->
              <input class="input_box" :value="label" disabled="true"/>
            </div>
        </div>
        <div class="table-content">
            <div v-for="item in data" :key="item.name" class="table-content"><!--根据数据渲染行-->
                <div v-for="tabcoulumn in item " :key="tabcoulumn.age"><input class="input_box" :value="tabcoulumn" disabled="true"/></div><!--根据数据来渲染列-->
            </div>
        </div>
    </div>
    -----------------------------------------------------------------------
  CSS
      .table-content{
        display: grid;
        justify-content:start;
        grid-auto-flow: row;

    }
    .table-content >div{
        background-color: #8ca0ff;
        grid-auto-flow: column;
    }

    .lable-content{
        display: grid;
        justify-content:start;
        grid-auto-flow: column;

    }
    .lable-content >div{
        background-color: #8ca0ff;
        grid-auto-flow: row;
    }
    .input_box{
        width: 99%;
        height: 99%;
        outline: none;
    }

实现效果

效果图

优化

实现改变选中行背景色

                document.getElementsByClassName('table-content').forEach(el=>{
                    el.childNodes.forEach(children=>{
                        children.childNodes.forEach(item=>{
                            item.style.backgroundColor="white"
                        })
                    })
                })
                document.getElementsByClassName('table-content')[index].childNodes.forEach(item=>{
                    item.childNodes.forEach(it=>{
                        it.style.backgroundColor="red"
                    })
                })
                document.getElementsByClassName('table-content')[index].style.backgroundColor='red'

效果