【问题标题】:How to add div field dynamically in to a html page?如何将 div 字段动态添加到 html 页面中?
【发布时间】:2017-02-24 17:12:17
【问题描述】:

我尝试在单击按钮时动态添加 div 字段,但没有得到响应。这是我的代码。

<div id="#para">
  <tr class="divider"></tr>
  <tr>
    <td><input type="text" placeholder="Enter Medicin Name" style="width:80%;height:30px;"></td>
    <td><input type="file" </td>
    <td><input type="time" placeholder="Enter Medicin Time"></td>
    <td><input type="date" placeholder="Enter Start Date"></td>
    <td><input type="date" placeholder="Enter End Date"></td>
  </tr>
  <tr class="divider"></tr>
</div>
<button type="submit" class="button" id="#btn1" value="Submit"><img src="images/plus.png"> Add More Notification</button>

这是我的 Js 代码

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#para").append('  <tr class="divider"></tr> <tr class="notification-row"><td><input type="text" placeholder="Enter Medicin Name" style="width:80%;height:30px;"></td>  <td><input type="file" </td> <td><input type="time" placeholder="Enter Medicin Time"></td> <td><input type="date" placeholder="Enter Start Date"></td><td><input type="date" placeholder="Enter End Date"></td> </tr><tr class="divider"></tr>');
  });
});

【问题讨论】:

  • 您的控制台是否显示任何错误?
  • 没有没有错误
  • 您的 html 无效。你不能在div 中使用tr。也许问题就在这里。
  • 仍然无法工作@Mohammad
  • 您将div 更改为table 并且没有措辞?

标签: javascript jquery html css jquery-append


【解决方案1】:

试试这个

<div id="para">
  <tr class="divider"></tr>
  <tr>
    <td><input type="text" placeholder="Enter Medicin Name" style="width:80%;height:30px;"></td>
    <td><input type="file" </td>
    <td><input type="time" placeholder="Enter Medicin Time"></td>
    <td><input type="date" placeholder="Enter Start Date"></td>
    <td><input type="date" placeholder="Enter End Date"></td>
  </tr>
  <tr class="divider"></tr>
</div>
<button type="submit" class="button" id="btn1" value="Submit"><img src="images/plus.png"> Add More Notification</button>

你应该在你的 HTML 脚本中删除 #

在 HTML (id) = jQuery (#) 在 HTML (类) = jQuery (.)

你可以在谷歌上找到这个

【讨论】:

  • 如果您发现它是正确的,请勾选它作为您的答案。谢谢@AmitChauhan
猜你喜欢
  • 2012-06-12
  • 2011-07-27
  • 1970-01-01
  • 1970-01-01
  • 2019-04-09
  • 1970-01-01
  • 1970-01-01
  • 2021-08-26
  • 1970-01-01
相关资源
最近更新 更多