将最后一个表行的选定值复制到新值
Copy selected value of last table row, to the new one
在我的脚本中,当用户单击"添加"按钮时,我将添加一个表行,并且我想将新表行的值(谁有输入框和dropbown选择)设置为与旧的最后一行相同。我将尝试此脚本,但它失败了:
$('input[name=add]').live('click', function()
{
var y = $('table tbody tr').length;
var x = $('table tbody tr td').length;
var last = $('table tbody tr:last');
//alert(last.find('select:first').val());
var value;
last.clone(true).insertAfter(last);
//alert(y);
$('table tbody tr:last').find('td:last').html('<input type="button" class="btn" name="delete" value=" - " />');
var col =$('table tbody').find('tr').eq(y).find('td');
col.eq(x).each(function(index, element) {
if(col.eq(index).has('input'))
{
value=$(this).val();
$('table tbody tr:last').find('td').eq(index).find('input').val(value);
}elseif(col.eq(index).has('select'))
{
value = col.eq(index).find('select').val();
$('table tbody tr:last').find('td').eq(index).find('select').val(value);
}
});
它仅适用于输入框的第一个。表格行是这样的:
<tbody>
<tr><td><input type="text" class="input-small" name="article" /></td>
<td>
<select name="colore">
<option value="nabuk">Nabuk</option>
<option value="nero">Nero</option>
<option value="blu">Blu</option>
<option value="rosso">Rosso</option>
</select>
</td>
<td>
<select name="fondo">
<option value="gomma">Gomma</option>
<option value="cuoio">Cuoio</option>
<option value="legno">Legno</option>
</select>
</td>
<td>
<select name="numero">
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
</select></td>
<td><input type="number" class="input-mini" min="1" max="200" name="qnt" step="1" /></td>
<td></td>
</tr>
</tbody>
我认为你不需要这么大的代码,试试这个:
$('table').on('click', '.btn', function() {
$(this).closest('tr').remove();
});
$('input[name=add]').on('click', function() {
var cloned = $('table tr:last').clone(true); // clone last row
// looping over last row's inputs
$('table tr:last').find(':input').each(function() {
// set values to cloned inputs same previous
cloned.find(':input[name=' + this.name + ']').val(this.value);
});
$('table > tbody').append(cloned); // append the cloned row to table
});
演示
根据评论
$('table').on('click', 'input[name=add]', function() {
var cloned = $('table tbody tr:last').clone(true);
cloned.find('td:last').html('<input type="button" class="btn" name="delete" value=" - " />');
$('table tbody tr:last').find('select').each(function() {
cloned.find('select[name^=' + this.name.replace('[]','') + ']').val(this.value);
});
$('table tbody').append(cloned);
});
演示
这是代码,您可以使用它完成您想要的,您可以进一步优化,但它可以满足您的需求
$('body').on('click', 'input[name=add]',function()
{
var last = $('table tbody tr:last');
var value;
last.clone(true).insertAfter(last);
$('table tbody tr:last')
.find('td:last')
.html('<input type="button" class="btn" name="delete" value=" - " />');
var col = last.find('td');
col.each(function(index, element) {
if($(this).find(':text').length)
{
value=$(this).find(':text').val();
$('table tbody tr:last')
.find('td').
eq(index).find('input').val(value);
}else if($(this).find('select').length)
{
value = $(this).find('select').val();
$('table tbody tr:last')
.find('td').eq(index)
.find('select').val(value);
}
});
});
$('table').on('click','.btn',function(){
$(this).closest('tr').remove();
});
我使用了 $.on,因为$.live
现在已经贬值了。
工作小提琴
不幸的是,
jQuery 克隆不会深度复制 selectedIndex。这是一个简洁的解决方法,尽管对于大型文档可能会很慢:
$("table tr:last select").change(function() {
$("table tr:last").find(":selected").attr("selected", "selected");
});
$('button[name=add]').live('click', function() {
$("table tr:last").find(":selected").attr("selected", "selected");
$("table tr:last").clone().appendTo("tbody");
});
http://jsfiddle.net/m8RNb/1/
相关文章:
- $$hashKey在Angular中push()新对象时未生成新值
- text()将保留旧值,但在DOM上显示新值
- Knockout Force在设置新值时通知订阅者可观察到的值
- Javascript / JQuery循环访问已发布的ajax数据字符串以为其分配新值
- 为nouislider设置新值已达到最大数量
- object.create 不使用我的新值
- 在更改选择元素后,在 Javascript 上使用旧值和新值
- 表单不接受新值
- 使用jQuery为属性设置新值
- 如何从javascript散点图中的另一个变量为x和y添加新值
- 根据另一个字段选择获取新值后更新下拉列表内容
- 可以't为我的自动完成框指定新值
- 使用新值更新时出现数组问题
- ajax重新渲染时获得新值
- onClick()从传递给Django模板的函数中获取一个新值
- Grunt为任务设置选项,并使用新值运行该任务
- 比较两个数组,并通过使用 javascript 保留现有对象来更新新值
- 如何使用 Angular.js/javascript 将 JSON 数组值替换为新值
- API 从 angularjs 中保存新值和旧值
- 将最后一个表行的选定值复制到新值