添加一行NewRow

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


<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";
    }

写的挺多,纯属无聊,如有调侃,欢迎井喷。

你可能感兴趣的:(js,table,frag)