不能似乎使用jQuery

我有需要必须添加一个动态行的表中的HTML表格添加动态行。我设置了4行的限制，这将根据表的用途而改变。不能似乎使用jQuery

我很困惑，为什么我添加行心不是工作。我确定它可能是非常简单的东西，但我真的需要解决这个问题。请解决方案建议

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

来源

2016-12-06 user3473873

为什么你使用'jquery.js'的多个版本？即'jQuery的1.7.js' /'1.4.1/jquery.js'而__your代码works__ – Satpal

这似乎为我工作得很好：https://jsfiddle.net/m49g53eq/你能生产出[MCVE]证明您遇到的问题（或者说，最起码定义“不工作”） – Jamiec

我复制它小提琴，它的工作。只是我只加一个'jQuery' [小提琴]（https://jsfiddle.net/jo_Geek/bxcmw8j9/） –

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

您没有在表格中定义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>

来源

2016-12-06 12:02:00 ScanQR

谢谢:) @TechBreak – user3473873

谁是downvoter？ – ScanQR

-3

尝试将行追加到table标签像（ “你的表选择”）。 “这里TR HTML” 追加（）在js文件中;

来源

2016-12-06 11:56:52

开始由只包括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 
});

来源

2016-12-06 11:58:21 Jamiec

好吧会做谢谢 – user3473873

我觉得这里有两件事情：

首先，你可能需要的文件准备好包装（即jQuery(function() {... your code here ...});）在你的addRow单击事件，在运行之前有绑定到.addrow元素的含义。

其次，你是不是使用event.preventDefault()该点击绑定内。这意味着该链接正在被遵循，因为它没有位置，但确实有一个href，它再次加载页面。

一旦你添加这些位的代码对我的作品 - 这里是展示它JS斌环节的工作：https://jsbin.com/kiwako/edit?html,js,console,output

我不包括你的一些JS日期选择器为简单起见。

来源

2016-12-06 12:53:23 mattbee

不能似乎使用jQuery

回答

相关问题