• Edit tbody


    You can't use innerHTML on parts of a table.innerHTML can only use to replace the entire table.

    stop using innerHTML,take some time and learn the DOM.

    <!--子窗口操作结果-->
            <div>
                <table class="innerTable">
                    <thead>
                        <tr>
                            <th>
                                编码
                            </th>
                            <th>
                                类型
                            </th>
                            <th></th>
                            <th>
                                排序号
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody id="customAttribute"></tbody>
                </table> 
                <script type="text/javascript">
                    var tbodyObj = document.getElementById("customAttribute");
    
                    var TbodyInstance = function () {
                        this.RowLenth = function () {
                            return tbodyObj.rows.length;
                        };
                        this.Init = AddRow;
                        this.Add = AddRow;
                    };
    
                    var AddRow = function (index, isInit) {
                        var row_add = tbodyObj.insertRow(index);
                        var cell_code = row_add.insertCell(0);
                        var cell_type = row_add.insertCell(1);
                        var cell_value = row_add.insertCell(2);
                        var cell_order = row_add.insertCell(3);
                        var cell_button = row_add.insertCell(4);
                        if (index != 0) {
                            index = index.toString().replace(/^(0+)/gi, "");
                        }
                        cell_code.innerHTML = '<input type="text" id="txtrCode' + index + '"/>';
                        cell_type.innerHTML = '<input type="text" id="txtrType' + index + '"/>';
                        cell_value.innerHTML = '<input type="text" id="txtrValue' + index + '"/>';
                        cell_order.innerHTML = '<input type="text" id="txtrOrder' + index + '"/>';
                        if (isInit) {
                            cell_button.innerHTML = '<input type="button" id="btnrAdd' + index + '" value="添加" onclick="AddClick()"/>';
                        }
                        else {
                            cell_button.innerHTML = '<input type="button" id="btnrEdit' + index + '" value="编辑"/><input type="button" id="btnrDel' + index + '" value="删除" onclick="DeleteRow(this.parentNode)"/>';
                        }
                    };
    
                    var DeleteAllRow = function () {
                        var row_count = tbodyObj.rows.length;
                        for (var i = 1; i < row_count; i++) {
                            tbodyObj.deleteRow(1);
                        }
                    };
    
                    var DeleteLastRow = function () {
                        var row_count = tbodyObj.rows.length;
                        tbodyObj.deleteRow(row_count-1);
                    };
    
                    var DeleteRow = function (trobj) {
                        for (var i = 0; i < tbodyObj.rows.length; i++) {
                            if (tbodyObj.rows[i] == trobj.parentNode) {
                                tbodyObj.deleteRow(i);
                                break;
                            }
                        }
                    };
    
                    var GetRowIndex = function (row) {
                        var cell = row.cells[0];
                        var input_name = cell.firstChild.getAttribute("id");
                        return input_name.substring(8,9);
                    };
    
                    var GetInput = function () {
                        var row_count = tbodyObj.rows.length;
                        //var row_index = row_count - 1;
                        var row_index = GetRowIndex(tbodyObj.rows[row_count - 1]);
                        this.Code = document.getElementById("txtrCode" + row_index).value;
                        this.Category = document.getElementById("txtrType" + row_index).value;
                        this.Value = document.getElementById("txtrValue" + row_index).value;
                        this.Order = document.getElementById("txtrOrder" + row_index).value;
                    };
    
                    var AssignRow = function (index, assignValues) {
                        var row_assign = tbodyObj.rows[index];
                        row_assign.cells[0].innerHTML = assignValues.Code;
                        row_assign.cells[1].innerHTML = assignValues.Category;
                        row_assign.cells[2].innerHTML = assignValues.Value;
                        row_assign.cells[3].innerHTML = assignValues.Order;
                    };
    
                    var AddClick = function () {
                        var rowCount = tbodyObj.rows.length;
                        var assignValue = new GetInput();
                        var rowIndex = GetRowIndex(tbodyObj.rows[rowCount - 1]);
                        DeleteLastRow();
                        alert(Number(rowCount) - 1);
                        AddRow(rowCount - 1, false);
                        AssignRow(rowCount - 1, assignValue);
                        //AddRow(Number(rowIndex)+1, true);
                        AddRow(rowCount, true);
                    };
    
                    var Initalization = function () {
                        var tbodyrow = new TbodyInstance();
                        tbodyrow.Init(0,true);
                    };
    
                    Initalization();
     
                </script>       
            </div>


    效果如下:


  • 相关阅读:
    波松分酒问题 C++求最优解. Anthony
    Effective STL 条款7 Anthony
    Effective STL 条款16 Anthony
    数据库设计经验之谈[转载]
    C#递归在dropdownlist显示树状
    多域名同主机js转向
    ASP.NET中常用的26个优化性能方法
    域名解析、子域名、cname别名指向、MX记录、泛域名与泛解析、域名绑定、域名转向
    C#数据库递归构造treeview树形结构
    ASP.NET多种方式生成高质量缩略图
  • 原文地址:https://www.cnblogs.com/hongjiumu/p/2661536.html
Copyright © 2020-2023  润新知