2011-06-28 5 views
0
内のテーブルへの追加私はこのWebページのために私の現在の「パッケージ」で「パッチ」の私のSQL DBから生成されたテーブルを作成しました

は、ここに示されている:新しい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> 

そして、私はチェックボックスと送信ボタンを介して上の私のテーブルに追加することができる割り当てられていない "パッチ"の別のテーブルを持っています。ここに示されている:私は現在、私の未割り当てられたパッチテーブル(表2)から(行)を選択し、「パッチ」を除去するためのいくつかのJavaScriptを書かれている

<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> 

、およびパッケージのパッチテーブルに追加し(表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という2つのクラスのイベントは、JSが作成したものを何もしません)。私はスペルミスをチェックしましたが、この問題の原因となるものは何も見つかりませんでした。

私の質問が明確でない場合は教えてください。ありがとう!

+0

イベントを添付する場所にJavaScriptを貼り付けることができます。 jqueryを使用してイベントをアタッチしている場合は、メソッドlive()を使用してイベントをアタッチする必要があるため、jQueryは新しいアタッチイベントを追加するときに$( '#your_table tr')を呼び出します。 ){}); –

+0

@SenadMeškin上記の添付ファイルのjavascriptを投稿しました。 "$( '#PatchTable')。append(newRow);"という行は、新しい行を追加する場所です。行のクリックイベントの行を変更しようとしているのではなく、代わりにボタンのクリックイベントを修正しようとしています。申し訳ありませんが私はあなたの質問を明確に理解していない場合。 –

答えて

1

男性これはいいことではありません。

私はSenadは、あなたがそれをロードしたときに作成されていないDOM内の要素のために.live使用する必要があります指摘としてTUは、その後、jqueryのを使用して2接続リストを使用するので、単純な!!!(http://jqueryui.com/demos/sortable/#connect-lists

であり、あなたをお勧めします。

このヘルプが必要です。

+0

ありがとう、私はそれを調べます。私はこれがそれをする悪い方法だと知っています。私はこれに新しいです:) –

関連する問題