不能似乎使用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

回答

相關問題