您的位置:首页 > Web前端 > JavaScript

支持所有浏览器,通过JS为 Table表增加、删除一行

2015-03-18 14:03 405 查看
function addTableRow(tableId) {

    var row = $("#" + tableId + " tr:eq(1)").clone();

    var rowIndex = $("#" + tableId + " tr").length;

    //遍历TD

    row.find('td').each(function (i) {

        var colIndex = i + 1;

        $(this).find('input').each(function (j) {

            //绑定验证规则

            if (typeof ($(this).attr('ruleValue')) != "undefined" && $(this).attr("IsChecking") == '1') {

                $(this).attr('data-rule', $(this).attr('ruleValue'));

            }

            //单选框、复选框

            if ($(this).attr('type') == 'radio' || $(this).attr('type') == 'checkbox') {

                $(this).attr("checked", false);

                var html = $(this).prop('outerHTML');

                html = html.replace($(this).attr('name'), $(this).attr('name') + rowIndex + colIndex);

                $(this).prop('outerHTML', html);

            }

            else {

                $(this).attr('value', '');

                $(this).val('');

                $(this).attr('id', $(this).attr('id') + rowIndex + colIndex);

                $(this).attr('name', $(this).attr('id'));

            }

        });

        //文本框

        $(this).find('textarea').each(function (i) {

            //绑定验证规则

            if (typeof ($(this).attr('ruleValue')) != "undefined" && $(this).attr("IsChecking") == '1') {

                $(this).attr('data-rule', $(this).attr('ruleValue'));

            }

            $(this).attr('value', '');

            $(this).val('');

            $(this).attr('id', $(this).attr('id') + rowIndex + colIndex);

            $(this).attr('name', $(this).attr('id'));

        });

        //下拉框

        $(this).find('select').each(function (i) {

            //绑定验证规则

            if (typeof ($(this).attr('ruleValue')) != "undefined" && $(this).attr("IsChecking") == '1') {

                $(this).attr('data-rule', $(this).attr('ruleValue'));

            }

            $(this).attr('value', '');

            $(this).attr('id', $(this).attr('id') + rowIndex + colIndex);

            $(this).attr('name', $(this).attr('id'));

        });

        //移除无效元素

        $(this).find('span').each(function (i) {

            if (typeof ($(this).attr('for')) != "undefined") {

                $(this).remove();

            }

        });

    });

    $('#' + tableId).append(row);

}

//给table增加一行  

function addTableRow_IE(tableId) {

    var t = document.getElementById(tableId);

    var cloneTd = t.firstChild.childNodes[1].cloneNode(true);

    //遍历TR

    var i = t.firstChild.childNodes.length;

    //遍历TD

    var tdList = cloneTd.childNodes;

    for (var j = 0; j < tdList.length; j++) {

        var inputList = tdList[j].getElementsByTagName("input");

        var textarea = tdList[j].getElementsByTagName("textarea");

        var selectOption = tdList[j].getElementsByTagName("select");

        for (var k = 0; k < inputList.length; k++) {

            var obj = inputList[k];

            if (obj.getAttribute("ruleValue") != null && obj.getAttribute("IsChecking") == '1') {

                obj.setAttribute('data-rule', obj.getAttribute('ruleValue'));

            }

            if (obj.getAttribute('type') == 'radio' || obj.getAttribute('type') == 'checkbox') {

                obj.checked = false;

                var html = obj.outerHTML;

                html = html.replace($(obj).attr('name'), $(obj).attr('name') + i + j);

                obj.outerHTML = html;

            }

            else {

                obj.value = '';

                obj.id = obj.id + i + j;

                $(obj).attr('name', obj.id);

            }

        }

        for (var k = 0; k < textarea.length; k++) {

            var obj = textarea[k];

            if (obj.getAttribute("ruleValue") != null && obj.getAttribute("IsChecking") == '1') {

                obj.setAttribute('data-rule', obj.getAttribute('ruleValue'));

            }

            obj.value = '';

            obj.id = obj.id + i + j;

            $(obj).attr('name', obj.id);

        }

        for (var k = 0; k < selectOption.length; k++) {

            var obj = selectOption[k];

            if (obj.getAttribute("ruleValue") != null && obj.getAttribute("IsChecking") == '1') {

                obj.setAttribute('data-rule', obj.getAttribute('ruleValue'));

            }

            obj.id = obj.id + i + j;

            $(obj).attr('name', obj.id);

            obj.value = '';

        }

        //遍历TD里面多个控件

        var spanList = tdList[j].getElementsByTagName("span");

        for (var k = 0; k < spanList.length; k++) {

            var obj = spanList[k];

            if (obj.getAttribute('for') != null) { // == trList[1].childNodes[j].firstChild.id) {

                obj.parentNode.removeChild(obj);

            }

        }

    }

    t.firstChild.appendChild(cloneTd);

}

//通过当前行后面的delete链接删除本行

function delTableRow(tableId, obj) {

    var IsReadonly = obj.getAttribute("IsReadonly");

    //只读-不可编辑

    if (IsReadonly == 1) {

        return;

    }

    var t = document.getElementById(tableId);

    if (t.rows.length <= 2) {

        alert("明细表单至少显示一行!");

    }

    else {

        t.deleteRow(obj.parentNode.parentNode.rowIndex);

    }

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: