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>
效果如下: