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>

 

效果如下: