【发布时间】：2011-06-28 20:46:55
【问题描述】：
我已经为此处显示的此网页创建了一个从我当前“包”中的“补丁”SQL DB 生成的表：
<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 和每个<tr>、<td> 的文本，和<div>。
这是我的 JS（我删除了一些东西，因为我认为它们对我的问题没有必要）：
$('#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 和隐藏的 SaveButtonInput 类无法识别 javascript 创建的行（即我的 click 这两个类的事件在JS 创建的被点击）。我检查了拼写错误，但没有发现任何会导致此问题的内容。
如果我的问题不清楚，请告诉我。谢谢！
【问题讨论】：
-
你能把你的javascript粘贴到你要附加事件的地方吗？因为如果您使用 jquery 附加事件，那么您应该使用方法 live() 附加事件，因此 jQuery 将在向其添加新元素附加事件时，例如 $('#your_table tr').live('click', function( ) {});
-
@Senad Meškin 我已经为上面的附件发布了我的 javascript。 “ $('#PatchTable').append(newRow); ”这一行是我添加新行的地方。我不是试图在行单击事件上修改行，而是在按钮单击事件上。抱歉，如果我没有清楚地理解您的问题。
标签： jquery html asp.net-mvc row add