-3

jQueryを使用すると、チェックボックスを動的にバインドできますが、解決できない問題がいくつかあります。

1.フィドルでは、Add a nameボタンをクリックするとポップアップが開き、名前が表示されます。ボタンを押した後、関連データはテーブルに動的にバインドされますが、最初submitのテーブルにバインドする必要があります。既に指定されているサンプル行の下の1 番目に追加する必要があります。<tr><tr><tr>

2.ページの読み込み時id=listに非表示にする必要がありますが、これを追加しline $("#list").hide();て非表示にすると、出力が得られません。

jQuery:

<script>
 $(document).ready(function ()
   {
      $("#btnShowModal").click(function ()
      {
         ShowDialog(true);

      });

      $("#btnClose").click(function ()
      {
         HideDialog();

      });

      $("#btnSubmit").click(function ()
      {
         var brand = $("#brand1").val();
          var $newrow=$('#list').clone();
          $newrow.find("td:eq(0)").text(brand);
         $("#rounded_border").append($newrow);
         HideDialog();

      });
});

   function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").show();

      if (modal)
      {
         $("#overlay").unbind("click");
      }
      else
      {
         $("#overlay").click(function ()
         {
            HideDialog();
         });
      }
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").hide();
   } 
</script>

CSS:

<style>
.dialog_display
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.dialog
{
   display: none;
   position: fixed;
   width: 220px;
   height: 130px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;   
   font-size: 10pt;
}
.dialog_title
{
   border-bottom: solid 2px #336699;
   background-color: #336699;
   padding: 4px;
   color: White;
   font-weight:bold;
}
.dialog_title a
{
   color: White;
   text-decoration: none;
}
.align_right
{
   text-align: right;
}
#dynamic{display:none;}
</style>

html

<body>
<table width="100%" cellpadding="0" cellspacing="0"  id="rounded_border">
  <tr>
    <td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
  </tr>
  <tr>
    <td><strong>Involved</strong></td>
    <td><a href="#" id="btnShowModal"><button>Add a name</button></a></td>
    <td><p align=center>or</p></td>
    <td>Add from list</td>
  </tr>
  <tr id="list"  class="ir-shade"><div id="dynamic">
    <td><span class="delete_icon">x</span>Attila Hun</td>
    <td>
      <input id="firstaid" onclick="addtreatment();" type="checkbox"/>
      FirstAid needed
    </td>
    <td>
      <input class="sickbay" onclick="addtreatment();" type="checkbox"/>
      Sent to Sick bay
    </td>
    <td>
      <input class="ambulance" onclick="addtreatment();" type="checkbox"/>
      Ambulance
    </td>
  </div>
  </tr>
<tr>
                    <td><strong>Reported by</strong></td>
                    <td><button>Add a name</button></td>
                    <td><p align=center>or</p></td>
                    <td><button>Add from list</button></td>
                </tr>
</table>

<div id="overlay" class="dialog_display"></div>

<div id="dialog" class="dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="dialog_title">Type a name</td>
         <td class="dialog_title align_right">
            <a href="#" id="btnClose">Close</a>
         </td>
      </tr>      
      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <b>&nbsp; </b>
         </td>
      </tr>     
      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <div id="brands">
               <input id="brand1" name="brand" type="text"  value="" /> 

            </div>
         </td>
      </tr>

      <tr>
         <td colspan="2" style="text-align: center;">
            <input id="btnSubmit" type="button" value="Submit" />
         </td>
      </tr>
   </table>
</div>
</body>

このフィドルサンプルコードから私のコードを見ることができます

これを解決するために私を導いてください。

4

1 に答える 1

0

You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list

  $("#btnSubmit").click(function (e)
  {
     var brand = $("#brand1").val();
      var $newrow=$('#list').clone().show().removeAttr("id");
      $newrow.find("td:eq(0)").text(brand);

     $("#rounded_border").append($newrow);
     HideDialog();
     e.preventDefault();
  });
于 2013-05-20T15:11:51.200 に答える