关于用JS在表格上加一行的做法

背景:

在表格上,希望表头内容是可变的,就是在数据库里面读出来,做字符串分割后,添加到thead,成为表头

方法:

html:

<table class="table display" id="datatable" border="0">
    <thead>
        <tr id="tableHead" >
        </tr>
    </thead>
</table>

js:

  //表头部分
                    function getHead(rowTitle)
                    {
                        var tr=document.getElementById("tableHead");
                        var title=new Array();
                        var widthds=new Array();
                        var str="@widthstr";
                        widthds=str.split("#");

                        title=rowTitle.split("#");   //分割后各个列名数组


                        for(var i=0;i<title.length;i++)
                        {
                            var th=document.createElement('th'); //创建th
                            th.innerHTML=title[i];               //填入数据
                            th.style.width=parseInt(widthds[i])+"px"; //表头各列长度
                                                                      //(也是数据库读出来的,如果不需要自定义,可省去这行)
                            tr.appendChild(th);     //添加th
                        }
                    }
                    getHead("@spelst[Ind].rowTitle");   //表头内容字符串

如此,就完成了表头的一行添加,同时此方法也可以用在表体上。

表头效果如下:

猜你喜欢

转载自blog.csdn.net/dongli5012/article/details/81332947