使用JavaScript将新行添加到gridview

Question

我有一个网格视图。 我使用JS动态添加新行，在GV中每行添加一个图像（addButton），同时单击该图像将调用以下js。

function AddNewRecord(e) {

    debugger;
    var hfFirstNewf = document.getElementById('ctl14_hfFirstNewf');
    var grd = document.getElementById('ctl14_gvWTM');
    var rowCount = grd.rows.length;
    var tbod = grd.rows[0].parentNode;
    var **newRow** = grd.rows[grd.rows.length - 1].cloneNode(true);
    tbod.appendChild(newRow);

    return false;
}

通过代码调试时， newRow.innerHTML包含以下内容（这是原始代码的一部分）

<SPAN style="WIDTH: 100%; DISPLAY: inline-block" id=ctl14_gvWTM_ctl02_lblSrno>1</SPAN> <INPUT style="BORDER-RIGHT-WIDTH: 0px; WIDTH: 100%; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 15px; BORDER-LEFT-WIDTH: 0px" id=ctl14_gvWTM_ctl02_btnADD class=href title="Add another Row" onclick="return AddNew();" src="http://localhost:12294/RIBO/App_Themes/RIBO/Images/AddNew.png" type=image name=ctl14$gvWTM$ctl02$btnADD Text="ADD">

这里**id=ctl14_gvWTM_ctl02_btnADD** ctl02是生成的所有新行的ID（当我单击网格的第二行addButton时，单击第三行addButton时，第三行和新行将为id = ctl14_gvWTM_ctl03_btnADD ）。 问题是，单击新行时，它将基于原始行（row2或row3）进行操作。

有什么解决办法吗？ or可以在使用replace ??生成时将innerText文本ctl02更改为新行的新内容？

from image1 ，我已经使用该图像添加了新行。所有三行都是从第一行新添加的。当单击gridview的第四行DUnumber列（ you can find the cursor at the bottom round ）时，它显示第一行的DUnumber （处理符号）在上image 2 :在第4行DuNumber上单击时加载了第1行DuNumber的建议。从中选择任何内容时，它将加载在第1行而不是第4行上

Answer 1

您需要做几件事。

用户控件设计

• 您需要将javascript和用户控件一起嵌入 。 其中的javascript将是您正在调用的函数，用于将数据从该弹出窗口更新到相关的文本框。
• 您面临的问题是您的脚本设置了错误的文本框。

这里建议的一种技术是将所有内容包装到div中。 因此，您的用户控件标记将具有：

<div>
   <asp:TextBox ID="tbx1" runat="server" ...></asp:TextBox>
   <%-- other stuff --%>
</div>

假设上面的代码中的某个地方有一个按钮（为简单起见，假定不再有嵌套的div）。 单击它时，需要引用该按钮。 为此，请修改javascript函数，如下所示：

function AddNewRecord(ctrl) {

    var divContainer = ctrl.parentNode; // reference to the containing div.     
    //to get textbox
    var inputFields = divContainer.getElementsByTagName('input');
    //usually it would be the first one...
    var tbx = inputFields[0];
    console.log(tbx.value); //prints value of textbox.

}

该函数的调用方式如下：

<input type="button" onclick="AddNewRecord(this)" ... />