使用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我可以通过使用innerText生成replace文本ctl02到新行的新内容吗？

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

Answer 1

您需要做几件事。

User control design

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