javaScript实现table表格的一些简单操作

题目：

JS代码如下：

<script>

//获取操作对象

var tbody=document.querySelector(table).firstElementChild

//获取所有按钮对象

var btns=document.querySelectorAll(button)

//给第一个按钮绑定点击事件

btns[0].οnclick=function(){

//创建tr

var newTr=document.createElement(tr)

//给当前tr对象添加内容

newTr.innerHTML="<td>javascript权威指南</td>"

+"<td>$"+parseInt(Math.random()*90+10)+"</td>"

//把新节点对象追加到tbody中

tbody.appendChild(newTr)

}

btns[1].οnclick=function(){

//获取当前tbody中的第二行

var tr2=tbody.children[1]

//判断当前tbody中的行数是否大于1

if(tbody.children.length>1){

tr2.remove()

}

}

btns[2].οnclick=function(){

//获取标题行

var tr1=tbody.children[0]

tr1.style="text-align:center;background-color:#666"

}

btns[3].οnclick=function(){

//获取当前tbody中所有子元素节点

var trs=tbody.children

//获取最后一行

var lastTr=trs[trs.length-1]

//克隆最后一行

var newTr=lastTr.cloneNode(true)

//把克隆好的内容插入到指定位置

tbody.insertBefore(newTr,trs[2])

}

</script>

<table border=1 cellpadding=0 cellspacing=0 width=350>
        <tr>
            <td>书名</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>看得见风景的房</td>
            <td>$19.9</td>
        </tr>
        <tr>
            <td>60个瞬间</td>
            <td>$9.9</td>
        </tr>
        <tr>
            <td>十万个为什么</td>
            <td>$29.9</td>
        </tr>
    </table>
    <button>增加一行</button>
    <button>删除第2行</button>
    <button>修改标题样式</button>
    <button>复制最后一行</button>

<script>
        //获取操作对象
        var tbody=document.querySelector(table).firstElementChild
        //获取所有按钮对象
        var btns=document.querySelectorAll(button)
        //给第一个按钮绑定点击事件
        btns[0].onclick=function(){
            //创建tr
            var newTr=document.createElement(tr)
            //给当前tr对象添加内容
            newTr.innerHTML="<td>javascript权威指南</td>"
            +"<td>$"+parseInt(Math.random()*90+10)+"</td>"
            //把新节点对象追加到tbody中
            tbody.appendChild(newTr)
        }
        btns[1].onclick=function(){
            //获取当前tbody中的第二行
            var tr2=tbody.children[1]
            //判断当前tbody中的行数是否大于1
            if(tbody.children.length>1){
                tr2.remove()
            }
        }
        btns[2].onclick=function(){
            //获取标题行
            var tr1=tbody.children[0]
            tr1.style="text-align:center;background-color:#666"
        }
        btns[3].onclick=function(){
            //获取当前tbody中所有子元素节点
            var trs=tbody.children
            //获取最后一行
            var lastTr=trs[trs.length-1]
            //克隆最后一行
            var newTr=lastTr.cloneNode(true)
            //把克隆好的内容插入到指定位置
            tbody.insertBefore(newTr,trs[2])
        }
    </script>