我有以下结构
<tr>
<td data-unit="spear" class="tooltip">
<input type="text" size="2" name="spear-1" />
</td>
<td data-unit="sword" class="tooltip">
<input type="text" size="2" name="sword-1" />
</td>
</tr>
我希望每次我通过名称中的jQuery变量调用clone函数时都会自动增加spear-2. sword-2
这是一个例子,我有20个这样的领域,我想要一个可以改变所有这一点的通用的东西
这可能吗?
答案 0 :(得分:2)
尝试这样简单的示例代码:
<强> HTML 强>
<table>
<tr>
<td data-unit="spear" class="tooltip">
<input type="text" size="2" name="spear" />
</td>
<td data-unit="sword" class="tooltip">
<input type="text" size="2" name="sword" />
<input type="checkbox" name="knife" />
<select name="book">
<option>as</option>
</select>
</td>
</tr>
</table>
<button>click</button>
<强>的jQuery 强>
$(document).ready(function () {
var a = 0;
$('button').click(function () {
a++;
var tr = $('tr').first().clone();
// inside find(), put any element you want to increment
// eg : .find('input, select, textarea')
$(tr).find('input, select').attr('name', function(i, e){
// i => index
// e => old value
// a => custom increment value
return e+'-' + a;
});
$(tr).appendTo('table');
})
});
DEMO - 检查元素(chrome)以查看为新克隆元素更改的属性名称。
答案 1 :(得分:0)
此Jquery代码可以帮助您克隆具有不同ID
的HTML元素<script type="text/javascript">
$(document).ready(function () {
var i = 2
$("#btnClone").click(function () {
$("#SpearClone").html($("#SpearClone").html() + '<input type="text" size="2" name="spear-' + i + '" />');
$("#SwordClone").html($("#SwordClone").html() + '<input type="text" size="2" name="sword-' + i + '" />');
i++;
});
});
</script>
<div id="DivClone">
<table>
<tr>
<td data-unit="spear" class="tooltip" id="SpearClone">
<input type="text" size="2" name="spear-1" />
</td>
<td data-unit="sword" class="tooltip" id="SwordClone">
<input type="text" size="2" name="sword-1" />
</td>
</tr>
</table>
<input type="button" id="btnClone" value="Call Clone" />
</div>
我希望我能帮助你...... 问候;)