DOM表格操作 添加删除

1.获取表格元素

//表格
<table width="500" border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>xx</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>xx</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td>3</td>
            <td>xx</td>
            <td>男</td>
            <td>21</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

//JavaScript
<script>
var oTab = document.getElementByTagName("table")[0];

//1. 获取thead标签;
var oTHead = oTab.tHead;

//2. 获取tbody;
var oTBody = oTab.tBodies[0];

//3. 获取tfont;
var oTFoot = oTab.tFoot;

//4. 获取行
console.log(oTab.row);//获取所有的行;
console.log(oTab.tBodies[0].rows);//获取tbody中的行;

//5. 获取单元格 --> 只能通过行获取
console.log(oTab.row[0].cells);
</script>

2. 添加表格元素

//表格
姓名：<input type="text">
性别：<input type="text">
年龄：<input type="text">
<button>添加<button>
<table width="500" border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>男</td>
        <td>21</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td>21</td>
    </tr>
    </tbody>
    <tfoot></tfoot>
</table>

//JavaScript
<script>
//获取table
var xTab = document.getElementsByTagName("table")[0];
//获取tbody
var xTb = xTab.tBodies;
//获取input
var xPut = document.getElementsByTagName("input");
//获取button
var xBtn = document.getElementsByTagName("button")[0];

//给button添加点击事件
xBtn.onclick = function(){
	var xTr = document.createElement("tr");//创建tr标签;
	var rowLength = xTb[0].rows.length+1;//每添加一行，序号加1；
	//想tr标签中添加内容;
	xTr.innerHTML += "<td>" + rowLength  + "</td>" +
					"<td>" + xPut[0].value + "</td>" +
					"<td>" + xPut[1].value + "</td>" +
					"<td>" + xPut[2].value + "</td>";
	//添加完之后让输入框里边的内容为空;
	xPut[0].value = "";
	xPut[1].value = "";
	xPut[2].value = "";
	//把创建的tr添加到tBody中;
	xTb[0].appendChild(xTr);//在最后一个<tr>之后添加
}
</script>

3. 删除表格

删除一行
每创建一行时多添加一个单元格放入一个删除按钮，给按钮绑定点击事件，点击时删除创建的tr；

var xButton = document.createElement("button");
xButton.innerHTML = "删除";
//添加点击事件
xButton.onclick = function(){
	//删除行
	this.parentNode.parentNode.remove();//把它爷爷删除，实现删除效果;
}
td.appendChild(button);//在td中添加button;
tr.appendChild(td);//在tr中添加td;
xTb.appendChild(tr);//在tbody中添加tr;