0
追加到表
我創建從我目前的「包」，「補丁」我的SQL數據庫生成這個網頁的表如下所示：生成新的HTML行，並在JQuery的
<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 [email protected]("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 [email protected]("environment_{0}", patch.PatchID)>
@patch.Environment
</div>
<div class="hidden" [email protected]("SelectEnvironment_{0}", patch.PatchID) >
<select name="DeploymentOption" [email protected]("EnvironmentValue_{0}", patch.PatchID)>
<option value="Staging">Staging</option>
<option value="Live">Live</option>
</select>
</div>
</td>
<td>
@*TODO: Figure out deploy options*@
<div [email protected]("platform_{0}", patch.PatchID)>
@patch.Platform
</div>
<div class="hidden" [email protected]("SelectPlatform_{0}", patch.PatchID)>
<select name="Staging Servers" [email protected]("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="" [email protected]("edit_{0}", patch.PatchID) />
</div>
<div class="SaveButton">
<input type="button" class="button SaveButtonInput hidden" value="" [email protected]("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 [email protected]("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創建的行（即，當JS創建的行被點擊時，這兩個類的我的click事件不會執行任何操作）。我檢查了拼寫錯誤，但沒有遇到任何會導致此問題的問題。
如果我的問題不清楚，請讓我知道。謝謝！
你可以粘貼你的JavaScript的地方附加事件。因爲如果你正在使用jQuery來附加事件，那麼你應該使用方法live（）來附加事件，所以jQuery將添加新的元素附加事件時，例如$（'＃your_table tr'）。live（'click'，function（ ）{}）; –
@SenadMeškin我已經發布了我的javascript的上述附件。行「$（'＃PatchTable'）。append（newRow）;」是我添加新行的地方。我不想修改行單擊事件上的行，而是修改按鈕單擊事件。對不起，如果我不明白你的問題。 –