Question

Uisng jQuery，我可以动态绑定复选框，但它们是我无法解决的一些问题。

1.如果你点击Add a name按钮，弹出窗口将打开并获取名称。按下submit按钮后，相关数据将动态绑定到表中，但它应该绑定在第一个<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>

您可以通过此小提琴sample code

查看我的代码

请指导我解决这个问题。

Answer 1

您必须从克隆的tr中删除id并在添加新的时取消隐藏它们，这就是为什么如果隐藏#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();
  });

使用jQuery动态绑定单击复选框和按钮

1 个答案: