gpt4 book ai didi

javascript - 如果标记了复选框,则复制 TR 元素并附加到外部源

转载 作者:行者123 更新时间:2023-12-03 11:36:39 24 4
gpt4 key购买 nike

我有这个 jQuery 代码:

$('button#btnBuscar').on('click', function (ev) {
ev.preventDefault();

$.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
.done(function (data, textStatus, jqXHR) {
if (data.entities.length > 0) {
$('#resultadoNorma').show();

var $html = '';
data.entities.forEach(function (value, index, array) {
$html += '<tr>';
$html += '<td><input type="checkbox" value="' + value.id + '"></td>';
$html += '<td>' + value.codigo + '</td>';
$html += '<td>' + value.norma + '</td>';
$html += '<td>' + value.anno + '</td>';
$html += '<td>' + value.comiteTecnico + '</td>';
$html += '</tr>';
});

$("table tbody#resultadoNormaBody").html($html);
}
})
.fail();
});

上面代码的目的是执行 Ajax 调用并渲染许多 tr 作为 JSON 响应中获取的值,这工作正常。现在,正如您所看到的,每次迭代的第一列上都有一个复选框,对吗?

我需要做的是在选中当前复选框时复制完整的行(tr)并附加到另一个表,而不重复相同的内容,也不删除其他表内容。可能有很多可能的解决方案,但现在(根据@josh-kg)建议其中之一可以标记复选框并立即克隆当前的 tr 元素,它会起作用,是的,但是如果我多次切换该复选框会发生什么?同一行将追加到#newTable 中,但这不是想法。使用提供的此解决方案,我应该切换克隆以附加/删除克隆的 tr

我正在考虑有一个按钮(button#btnAplicarNorma),默认情况下禁用,如果我至少标记了一个复选框,则启用它并在按钮的单击事件上进行克隆部分通过迭代每个标记的复选框,例如:

$('button#btnAplicarNorma').on('click', function (ev) {
// check if at least there is one checkbox marked and enable the button
// check which checkboxes are marked and clone the current element
})

但是我该怎么做呢?

注意:应克隆 tr 的表格不在模式本身中,而是在同一页面中,因此这不应该成为问题

最佳答案

$('#resultadoNormaBody').on('change','input[type=checkbox]',function(){ 
var my_checkbox = $(this);
if (my_checkbox.is(':checked')) {
my_checkbox.closest('tr').clone().appendTo('#newtable');
}
});

更新(OP 对预期行为进行了一些澄清之后):

要默认禁用该按钮,请在 HTML 标记中包含禁用属性:

<button id="btnAplicarNorma" disabled>Copy Rows</button>

然后,要在至少选中一个复选框时启用该按钮:

$('#resultadoNormaBody').on('change','input[type=checkbox]',function(){

var $my_checkbox = $(this);
var $my_tr = $my_checkbox.closest('tr');

if ( $my_checkbox.prop('checked') ) {

// Add the class to mark that it should be copied later when button clicked
$my_tr.addClass('copyMe');

}

var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');

// Loop through checkboxes to see if one is checked

$all_checkboxes.each(function() {
// if one checkbox is checked, enable button and end the .each loop

if ( $(this).prop('checked') ) {

$('#btnAplicarNorma').prop('disabled',false);
return false;

}

// If we didn't catch any checked boxes earlier, disable the button

$('#btnAplicarNorma').prop('disabled',true);

});

});

$('#btnAplicarNorma').on('click', function (ev) {

var $tr_to_append = $('#resultadoNormaBody').find('tr.copyMe');

// is there's a tr to copy, clone it, append, and remove the copyMe classes
if ( $tr_to_append.length ) {
// first uncheck all the checkboxes
$tr_to_append.find('input[type=checkbox]').prop('checked',false);
// copy and append and remove class
$tr_to_append.clone().appendTo('#newtable').removeClass('copyMe');
$tr_to_append.removeClass('copyMe');
// disable the button again
$(this).prop('disabled',true);
}

});

关于javascript - 如果标记了复选框,则复制 TR 元素并附加到外部源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26469066/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com