JavaScript之element的各种操作

先给出一个表格

<table width="500px" align="center" border="1px">
        <thead id="th">
            <tr>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
                <th>th5</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
                <td>td5</td>
            </tr>
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
                <td>td5</td>
            </tr>
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
                <td>td5</td>
            </tr>
            <tr>
                <td>td1</td>
                <td>td2</td>
                <td>td3</td>
                <td>td4</td>
                <td>td5</td>
            </tr>
        </tbody>
    </table>

添加四个按钮，功能分别是：插入，删除，替换，克隆

<input type="button" value="插入" onclick="Insert()">
<input type="button" value="删除" onclick="Delete()">
<input type="button" value="替换" onclick="Replace()">
<input type="button" value="克隆" onclick="Clone()">

再来分别写出四个函数

插入

function Insert() {
    //创建一个跨越五列的行
    var tr = document.createElement("tr");
    tr.id = "newTr";
    var td = document.createElement("td");
    td.colSpan = "5";
    td.innerHTML = "FiveCols";
    tr.appendChild(td);

    //将行添加到指定位置
    var tb = document.getElementById("tb");
    var trs = tb.getElementsByTagName("tr");
    tb.insertBefore(tr, trs[2]);
}

删除

//删除表格主体第一行
var tb=document.getElementById("tb");
var trs=tb.getElementsByTagName("tr");
tb.removeChild(trs[0]);

替换

//新建一行替换原表格主体第四行
var tr=document.createElement("tr");
var td=document.createElement("td");
td.colSpan="5"; //注意区分大小写
td.innerHTML="一个跨越5列的新行";
tr.appendChild(td);

var tb=document.getElementById("tb");
var trs=tb.getElementsByTagName("tr");
tb.replaceChild(tr, trs[3]);

克隆

function doClone(){
	var tb=document.getElementById("tb");
	var trs=tb.getElementsByTagName("tr");
	var tr=trs[2].cloneNode(false); //false表示不包括子节点，但包括属性，true表示包括子节点
	tb.appendChild(tr);
}