jQuery动态添加Table行

效果图

jQuery动态添加Table行

js代码展示如下:

1、控制添加删除按钮图标的显示,最后一行显示添加按钮，其他行显示删除按钮

//初始化
function Init(){
      //获取最后一行的data-row(标识行)
    var rowIndex = $("#eFromTable tr:last").attr("data-row");
    if (rowIndex == "" || rowIndex == null) {
        rowIndex = parseInt(1);
    } else {
        rowIndex = parseInt(rowIndex);
    }

    //隐藏添加按钮
    $('.imgShow').addClass('imgHide');
    //最后一行显示增加按钮
    $('img[data-id=' + rowIndex + ']').removeClass('imgHide');

    //全部显示删除
    $('.rowDelete').removeClass('imgHide');
    //最后一行隐藏删除按钮
    $('img[data-row=' + rowIndex + ']').addClass('imgHide');
};

View Code