使用 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 text ctl02 更改为新行的新内容吗？？

from image1 ，我已经使用那个加图像添加了新行。所有三行都是从第一行新添加的。点击gridview的第4行DUnumber列（you can find the cursor at the bottom round）它显示第一行的建议（处理符号在顶轮 image 2 : 加载第 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)" ... />