使用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 时。点击第3行 addButton 时将为第三行和新行 id = ctl14_gvWTM_ctl03_btnADD 。 问题是在基于原始行（row2或row3）单击它所操作的新行时。

这有什么解决方案吗？ or我可以使用innerText生成replace文字 ctl02 为新行的新内容吗？

from image1，我添加了新行以及image.all从第一行新添加了三行。点击gridview的第4行DUnumber列（{{1}它显示第一行的建议（顶部的过程符号） you can find the cursor at the bottom round加载第1行DuNumber的建议，同时点击第4行DuNumber。当选择任何内容时，它将加载到第1行而不是第4行

Answer 1

您需要做几件事。

用户控制设计

• 您需要embed 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)" ... />