添加一行NewRow

最新推荐文章于 2024-07-10 16:18:57 发布

liugang0605

最新推荐文章于 2024-07-10 16:18:57 发布

阅读量1.9k

点赞数

分类专栏： js table frag 文章标签：前端表格增加一行 js javascript

本文链接：https://blog.csdn.net/power8988/article/details/74010738

版权

js 同时被 3 个专栏收录

113 篇文章 2 订阅

订阅专栏

frag

3 篇文章 0 订阅

订阅专栏

table

1 篇文章 0 订阅

订阅专栏

英语专八转前端，在家学习ing。
欲实现，为表格添加一行，内含两个单元格“hello””world”;
首先是布局代码，这里引入了boot；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加一行</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<table></table>
<script>
    window.onload=function () {
//        此处写代码
    }
</script>
</body>
</html>

假设没有表格的api，直接用js写，可以如下：

window.onload=function () {
    var el=function(){
        this.$=function(sel){
            var sel=document.querySelectorAll(sel);
            return sel.length===1?sel[0]:sel;
            //        这里需要改进，还没想好
        };
        this.newEl=function(el){
            return document.createElement(el)
        };
        this.frag=function(el){
            return document.createDocumentFragment().appendChild(this.newEl(el))
        };
        this.append=function (par,el){
            var par=this.$(par);
            var son=this.frag(el);
            par.appendChild(son)
        };
        this.content=function(el,content){
            var el=this.$(el);
            el.innerHTML=content;
        };
        this.addAttribute=function(el,attr,attrVal){
           this.$(el).setAttribute(attr,attrVal);
        }
    };
    var newtable=new el();
    newtable.append("table","tbody");
    newtable.addAttribute("table","class","table");
    newtable.append("tbody","tr");
    newtable.append("tr","td");
    newtable.addAttribute("td","class","bg-primary");
    newtable.content(".bg-primary","hello");
    newtable.append("tr","td");
    newtable.addAttribute("tr td:nth-child(2)","class","bg-success");
    newtable.content(".bg-success","world");
}

前端小白，吭哧吭哧出了这么多。
如果用用内置的api，则可能更快。以下是简单的代码；

 window.onload=function () {
//        此处写代码
        var table=document.querySelector("table");
        table.className="table";
        var row=table.insertRow();
        var td1=row.insertCell();
        td1.className="bg-primary";
        td1.innerHTML="hell";
        var td2=row.insertCell();
        td2.className="bg-success";
        td2.innerHTML="world";
    }