在JQuery中生成新的html Row和Appending to table

Question

我已经在我当前的“软件包”中创建了一个从我的SQL数据库生成的“补丁”表，这个网页显示在这里：

<table id="PatchTable">
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Date
                    </th>
                    <th>
                        Detach
                    </th>
                    <th>
                        Evironment
                    </th>
                    <th>
                        Platform
                    </th>
                    <th>
                    </th>
                </tr>
                @{DeploymentMVC.Models.DeploymentDb db = new DeploymentMVC.Models.DeploymentDb();
                  DeploymentMVC.Models.Patch[] patches = db.GetPatches(Model);
                }
                @foreach (var patch in patches)
                {
                    <tr id=@string.Format("patch_{0}", patch.PatchID)>
                        <td class="NameDisplay">
                            @Html.DisplayFor(ptch => patch.PatchName)
                        </td>
                        <td class="DateDisplay">
                            @Html.DisplayFor(ptch => patch.PatchDate)
                        </td>
                        <td>
                            <input type="hidden" name="pkgID" class="pkgID" value="@Model.PackageID" />
                            <input type="checkbox" class="patchIds" name="patchIdString" value="@patch.PatchID" />
                        </td>
                        <td>
                            <div id=@string.Format("environment_{0}", patch.PatchID)>
                                @patch.Environment
                            </div>
                            <div class="hidden" id=@string.Format("SelectEnvironment_{0}", patch.PatchID) >
                                <select name="DeploymentOption" id=@string.Format("EnvironmentValue_{0}", patch.PatchID)>
                                    <option value="Staging">Staging</option>
                                    <option value="Live">Live</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            @*TODO: Figure out deploy options*@
                            <div id=@string.Format("platform_{0}", patch.PatchID)>
                                @patch.Platform
                            </div>
                            <div class="hidden" id=@string.Format("SelectPlatform_{0}", patch.PatchID)>
                                <select name="Staging Servers" id=@string.Format("PlatformValue_{0}", patch.PatchID)>
                                    <option value="air-cast">air-cast</option>
                                    <option value="redshop">Redshop</option>
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="EditButton">
                                <input type="button" class="button EditButtonInput" value="" id=@string.Format("edit_{0}", patch.PatchID) />
                            </div>
                            <div class="SaveButton">
                                <input type="button" class="button SaveButtonInput hidden" value="" id=@string.Format("save_{0}", patch.PatchID) />
                            </div>
                        </td>
                    </tr>
                }
            </table>

然后我有另一张未分配的“补丁”表，可以通过复选框和提交按钮添加到我上面的表格中^。如图所示：

<table id="newPatchTable" class="sortable">
                        <tr>
                            <th>
                                <div class="pointer">
                                    Name
                                </div>
                            </th>
                            <th>
                                <div class="pointer">
                                    Date
                                </div>
                            </th>
                            <th>
                                Location
                            </th>
                            <th>
                            </th>
                        </tr>
                        @{
                            DeploymentMVC.Models.Patch[] patchArray = DeploymentMVC.Models.DirectoryHelper.GetAllPatches();
                        }
                        @if (patchArray.Length != 0)
                        {
                            foreach (var patch in patchArray)
                            {
                            <tr id=@string.Format("addPatch_{0}", patch.PatchName.Replace(@" ", string.Empty))>
                                <td class="NameDisplay">
                                    @Html.DisplayFor(modelItem => patch.PatchName)
                                </td>
                                <td class="DateDisplay">
                                    @Html.DisplayFor(modelItem => patch.PatchDate)
                                </td>
                                <td class="LocationDisplay">
                                    @Html.DisplayFor(modelItem => patch.PatchLocation)
                                </td>
                                <td>
                                    <input type="checkbox" name="patchNames" class="PatchNames" value="@patch.PatchName" />
                                </td>
                            </tr>
                            }
                        }
                        else
                        {
                            <tr>
                                <td>
                                    <div>
                                        <a>There are no current patches to add to your package. Please go to the @Html.ActionLink("Deploy Packages", "DeployPackages", "Package")
                                            page to see packages or refresh the page if you recently committed a change are
                                            expecting a patch to show up here. </a><a href="sf-build:8080">Click here to go to TeamCity
                                                to manually build your patch.</a>
                                    </div>
                                </td>
                            </tr>
                        }
                    </table>

我目前已经编写了一些javascript来从我未分配的补丁表（表2）中删除所选的“补丁”（行），并将它们添加到包的补丁表（表1）中。我知道这不是正确的方法，但我无法弄清楚如何使用clone()并能够编辑每个{id，class和文本1}}，<tr>和<td>。

这是我的JS（我删除了一些东西，因为我不认为它们对我的问题是必要的）：

<div>

这适用于直观地添加补丁（以及我的复选框工作），但我的$('#AddSelectedPatches').click(function () { ... $.each($('.PatchNames:checked'), function (i, element) { ... //Creates row in the package's "Patches" table var newRow = '<tr id=patch_' + patchID + '>' + '<td class="NameDisplay">' + patchName + '</td>' + '<td class="DateDisplay">' + patchDate + '</td>' + '<td><input type="hidden" name="pkgID" class="pkgID" value=' + $('#pkgID').val() + '/>' + '<input type="checkbox" class="patchIds" name="patchIdString" value=' + patchID + ' /></td>' + '<td><div id=environment_' + patchID + '>' + patchEnvironment + '</div>' + '<div class="hidden" id=SelectEnvironment_' + patchID + '><select name="DeploymentOption" id="EnvironmentValue_" + patch.PatchID>' + '<option value="Staging">Staging</option><option value="Live">Live</option></select></div></td>' + '<td><div id=platform_' + patch.PatchID + '>' + patchPlatform + '</div>' + '<div class="hidden" id=SelectPlatform_' + patchID + '>' + '<select name="Staging Servers" id="PlatformValue_" + patch.PatchID><option value="1">air-cast</option>' + '<option value="2">Redshop</option></select></div></td><td><div class="EditButton"><input type="button" class="button EditButtonInput" value="" id=edit_' + patchID + ' />' + '</div><div class="SaveButton"><input type="button" class="button SaveButtonInput hidden" value="" id=save_' + patchID + ' />' + '</div></td></tr>'; $('#PatchTable').append(newRow); //Removes row in "New Patches to Add" table var patchName_noSpaces = patchName.replace(/\s/g, '') $('#addPatch_' + patchName_noSpaces).remove(); }); return false; }); 和隐藏EditButtonInput类无法识别javascript创建的行（即我的SaveButtonInput个事件单击JS创建的类时，两个类不执行任何操作。我已经检查过拼写错误，但没有遇到任何导致此问题的错误。

如果我的问题不明确，请告诉我。谢谢！

Answer 1

男人这不是做这件事的更好方法。

我建议您使用jquery使用2连接列表，这很简单!!!（http://jqueryui.com/demos/sortable/#connect-lists）

然后正如Senad指出的那样，必须使用.live来表示dom中加载时未创建的元素。

希望得到这个帮助。