码迷,mamicode.com
首页 > Web开发 > 详细

js-动态为table插入、删除行

时间:2017-04-15 09:45:07      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:index   ram   doc   insert   table   time   log   方法   cell   

CreateTime--2017年4月15日08:09:43
Author:Marydon
js-动态插入、删除table行
用到table的insertRow()和deleteRow()方法
<input id = "userName" type="button" value="增加行" onclick="insertRow();"/>
<input id = "userName" type="button" value="删除行1" onclick="delRow();"/>
<input id = "userName" type="button" value="删除行3" onclick="delRow3();"/>
<table id="testTab" border="1" style="border-collapse: collapse;" width="99%">
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
    </tr>
</table>
1.动态插入行
/**
 * 在最后一个tr后插入行
 */
function insertRow () {
    var table = document.getElementById("testTab");
    var newRow = table.insertRow(-1);//新增行(最后一行)
    var newCell1 = newRow.insertCell(0);//第一列
    newCell1.innerHTML = "b1";
    var newCell2 = newRow.insertCell(1);//第二个单元格
    newCell2.innerHTML = "b2";
    var newCell3 = newRow.insertCell(2);//第三个单元格
    newCell3.innerHTML = "b3";
    newRow.insertCell(3).innerHTML = "<input type=‘button‘ value=‘删除行2‘ onclick=‘delRow2(this);‘/>"
}
2.删除行
/**
 * 删除最后一行tr
 */
function delRow () {
    var table = document.getElementById("testTab");
    var lastRowIndex = table.rows.length - 1;//最后一个tr的索引值
    table.deleteRow(lastRowIndex);    
}
/**
 * 删除指定行
 * @param {Object} rowIndex
 *         行索引
 */
function delRow2 (inputObj) {
    var trObj = inputObj.parentNode.parentNode;
    var rowIndex = trObj.rowIndex;
    var table = trObj.parentNode;
    table.deleteRow(rowIndex);
}
/**
 * 有参无参都可以
 * @param {Object} obj
 */
function delRow3 (obj) {
    var tableObj = null;
    var rowIndex = -1;
    if (obj) {
        tableObj = obj.parentNode.parentNode.parentNode;
        rowIndex = obj.parentNode.parentNode.rowIndex;
    } else{
        tableObj = document.getElementById("testTab");
        rowIndex = tableObj.rows.length - 1;
    }
    tableObj.deleteRow(rowIndex);    
    
}
 
 

js-动态为table插入、删除行

标签:index   ram   doc   insert   table   time   log   方法   cell   

原文地址:http://www.cnblogs.com/Marydon20170307/p/6713002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!