似乎无法使用 jquery 在 html 表中添加动态行答案

【问题标题】：Cant seem to add a dynamically rows in html table using jquery似乎无法使用 jquery 在 html 表中添加动态行
【发布时间】：2016-12-06 20:53:23
【问题描述】：

我有一个需要添加动态行的表。我设置了 4 行的限制，这将根据表格的使用而改变。

我很困惑为什么我的添加行不起作用。我确定它可能非常简单，但我确实需要解决这个问题。请指教解决方案

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>

 <!--<script src="addrow.js" language="Javascript" type="text/javascript"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js">   </script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">   </script>
   <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

  <script>
 $(function() {
$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedYear,      inst.selectedMonth, 1));
    }
});
 });
 </script>
 <script type='text/javascript'>
 var counter = 1;
 var limit = 4;
 jQuery('a.addrow').click(function(event){
     if (counter == limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
 }else{
event.preventDefault();
counter++;
var newRow = jQuery('<tr><td><input type="text" name="' +
    counter + '"/></td><td><input type="text" name="' +
    counter + '"/></td><td><input type="text" name="' +
    counter + '"/></td><td><input type="text" name="' +
    counter + '"/></td><td><input type="text" name="' +
    counter + '"/></td><td><input type="text" name="' +
    counter + '"/></td></tr>');
  jQuery('table.history').append(newRow);
  }});
   </script>

 </head>

 <html>
 <body>

 <style>
 .ui-datepicker-calendar {
  display: none;
  }
  </style>

 <table width="100%">
 <tbody>
 <tr>
 <td colspan="4" width="100%">
 <h1>title</h1>
 <p>some content</p>

</td>
</tr>
</table>
<table class="history" width="100%">

<tr><td>Dates(Months &amp; Year)</td></tr>

 <tr><td>From</td><td>To</td><td colspan="2">NAME - Company/ College/ Job     Centre/ Armed Services</p>
</td><td colspan="2">Address</td></tr>
<tr>
<td>
    <input name="startDate" id="startDate" class="date-picker" />
</td>
<td>
    <input name="toDate" id="toDate" class="date-picker" />
</td>
<td>
    <input type="text" name="first_name" />
</td>
<td>
    <input type="text" name="last_name" />
</td>
<td>
    <input type="text" name="first_name" />
</td>
<td>
    <input type="text" name="last_name" />
</td>
 </tr>
 </table>
  <a href="" title="" class="addrow">Add row</a>

【问题讨论】：

为什么要使用多个版本的jquery.js？即jquery-1.7.js/1.4.1/jquery.js 并且您的代码有效
这对我来说似乎很好用：jsfiddle.net/m49g53eq 你能提供一个minimal reproducible example 来证明你遇到的问题（或者，至少定义“不工作”）
我在小提琴上复制了它，它的工作原理。只是我只添加了一个jQueryFiddle
它工作正常fiddle。更新您的 jquery 版本。
我目前在本地主机上运行，这有影响吗？

标签： javascript jquery html

【解决方案1】：

您的代码有很多问题。请在下面找到工作示例。

您的表中没有定义tbody。
a标签改为普通button类型。
jquery 包含多个版本

$(document).ready(function(){
   
  $('.date-picker').datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      dateFormat: 'MM yy',
      onClose: function(dateText, inst) {
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
      }
    });
  
   jQuery('button.addrow').click(function(event) {
    if (counter == limit) {
      alert("You have reached the limit of adding " + counter + " inputs");
    } else {
      event.preventDefault();
      counter++;
      var newRow = jQuery('<tr><td><input type="text" name="' +
        counter + '"/></td><td><input type="text" name="' +
        counter + '"/></td><td><input type="text" name="' +
        counter + '"/></td><td><input type="text" name="' +
        counter + '"/></td><td><input type="text" name="' +
        counter + '"/></td><td><input type="text" name="' +
        counter + '"/></td></tr>');
      jQuery('table.history').append(newRow);
    }
  });
});

<!--<script src="addrow.js" language="Javascript" type="text/javascript"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<script>
  
</script>
<script type='text/javascript'>
  var counter = 1;
  var limit = 4;
 
</script>


  <table class="history" width="100%">
<tbody>
    <tr>
      <td>Dates(Months &amp; Year)</td>
    </tr>

    <tr>
      <td>From</td>
      <td>To</td>
      <td colspan="2"><p>NAME - Company/ College/ Job Centre/ Armed Services</p>
      </td>
      <td colspan="2">Address</td>
    </tr>
    <tr>
      <td>
        <input name="startDate" id="startDate" class="date-picker" />
      </td>
      <td>
        <input name="toDate" id="toDate" class="date-picker" />
      </td>
      <td>
        <input type="text" name="first_name" />
      </td>
      <td>
        <input type="text" name="last_name" />
      </td>
      <td>
        <input type="text" name="first_name" />
      </td>
      <td>
        <input type="text" name="last_name" />
      </td>
    </tr>
</tbody>
  </table>
  <button class="addrow">Add row</button>

【讨论】：

【解决方案2】：

从只包含 1 个版本的 jQuery 开始 - 不是您问题的答案，但不会受到伤害。

然后，要让您的代码正常工作，您的事件处理程序必须位于文档就绪函数中。

$(function() {
  $('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedYear,      inst.selectedMonth, 1));
    }
  });

  //   put your addrow code here
});

【讨论】：

【解决方案3】：

我认为这里有两点：

首先，您可能需要一个文档就绪包装器（即 jQuery(function() {... your code here ...}); ）围绕您的 addRow 点击事件，这意味着它在绑定到 .addrow 元素之前运行。

其次，您没有在该点击绑定中使用event.preventDefault()。这意味着该链接正在被跟踪，并且由于它没有位置，但确实有一个 href，它正在再次加载页面。

添加这些位后，代码对我有效 - 这是一个 JS Bin 链接，显示它有效：https://jsbin.com/kiwako/edit?html,js,console,output

为简单起见，我没有包含您的一些 datePicker JS。

【讨论】：

【解决方案4】：

尝试将该行附加到您的表格标签 like ("your table selector").append("tr html here") in js file;

【讨论】：