我让它在一个页面上工作 - 但是当我提取代码时,它不起作用。
我已将您的审核代码最小化:
<table class="lightlines">
<tr>
<td valign="top">Title:</td>
<td><input type="text" value="" name="titleText" id="titleText">
<p id="cloneMe">
<table class="lightlines">
<tr>
<td>P/N: </td>
<td><input type="text" value="" name="pnText" id="pnText"></td>
<td>Description: </td>
<td><input type="text" value="" name="pnDescText" id="pnDescText"></td>
</tr>
</table>
</p>
<p id="theClones">
</p>
</td>
</tr>
<tr>
<td colspan="6" align="right"><input type="button" name="addPNRow" id="addPNRow" value="add row" /><input type="button" name="saveTitleText" id="saveTitleText" value="save" /></td>
</tr>
</table>
<script>
$(function(){
var cloneCount = 0;
$('#addPNRow').click(function(){
var cl = $('#cloneMe').clone().attr({
id: 'cloneMe_' + cloneCount
}).find('[id^="pnText"]').attr({
value: '',
id: 'pnText_' + cloneCount
}).end().find('[id^="pnDescText"]').attr({
value: '',
id: 'pnDescText_' + cloneCount
}).end().appendTo('#theClones');
cloneCount++;
});
});
</script>
这是一个小提琴: http://jsfiddle.net/Mh4f8/11/
答案 0 :(得分:1)
每当我需要克隆一个HTML块时,我确保html中根本没有任何ID。
如果您可以从html中删除“ids”,那么您可以将javascript更改为我在下面的内容
fiddle, I ripped out the table
<div class="lightlines">
<fieldset>
<label class="label-title"><span>Title:</span>
<input type="text" value="" name="titleText"/>
</label>
</fieldset>
<fieldset class="clone-me">
<label><span>P/N:</span>
<input type="text" value="" name="pnText"/>
</label>
<label>
<span>Description:</span>
<input type="text" value="" name="pnDescText"/>
</label>
</fieldset>
</div>
<div class="button-container">
<input type="button" name="addPNRow" id="addPNRow" value="add row" />
<input type="button" name="saveTitleText" id="saveTitleText" value="save" />
</div>
div.lightlines .button-container{float:right;}
div.lightlines label {margin-left:2em;}
div.lightlines label.label-title {margin-left:0.5em;}
$(function(){
$('#addPNRow').click(function(){
var $cloneMe = $(".clone-me"),$cloned = $cloneMe.clone();
$cloned.find("input").each(function(index,elem){
$(this).val("");
});
$cloneMe.toggleClass("clone-me").parent().append($cloned);
});
});
发现问题,克隆后使用表格的方式并不完全有效w3c规范。您更新的fiddle
<table class="lightlines">
<tr>
<td>
<fieldset class="clone-me">
<label><span>P/N:</span>
<input type="text" value="" name="pnText"/>
</label>
<label>
<span>Description:</span>
<input type="text" value="" name="pnDescText"/>
</label>
</fieldset>
</td>
</tr>
<tr>
<td align="right"><input type="button" name="addPNRow" id="addPNRow" value="add row" /><input type="button" name="saveTitleText" id="saveTitleText" value="save" /></td>
</tr>
</table>
<script>
$(function(){
$('#addPNRow').click(function(){
var $row = $("fieldset.clone-me").closest("tr"), $cloned = $row.clone();
$cloned.find("input").each(function(index,elem){
$(this).val("");
}).end().find(".clone-me").toggleClass("clone-me");
$(this).before($cloned);
});
});
</script>