- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这个 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/
我想要数组中所选 tr 的所有下一个 tr 的 data-id。我使用此代码,但这不是一个好代码。 var ids = Array.prototype.slice.call($("tr.selecte
JSFiddle:http://jsfiddle.net/9u8tnh97/ 我正在使用 jQuery 和 Bootstrap。我有一张 table 4 像这样的元素:
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
在 Notepad++ 中,我试图制作一个正则表达式来匹配标签。起初,我认为必须转义大括号,所以我尝试了 \ .然而,这不仅符合我预期的开始标签,而且匹配所有 。 s( 和 )。这是为什么? 最佳答
我正在尝试定位其中包含子表行元素的表中的最后一个父表行。我已尝试使用下面的 jQuery 来定位 :last 伪值,但是,如预期的那样,它的目标是目标父表中的绝对最后一个表行元素。 $('table[
我想插入新的在每个现有的 之后。我的功能: var element = document.querySelector('tr.cart-item'); var newElement = docume
这个问题在这里已经有了答案: RegEx match open tags except XHTML self-contained tags (35 个答案) 关闭 9 年前。 我希望这个正则表达式匹
生成此代码是为了做两件事。第一个是单击复选框时突出显示表记录。第二个是即使页面刷新也能记住结果。 Untitled Document
嗨,我正在尝试在 tr 数组中查找 tr属性名称是 docId 是否有任何类型的 jquery 选择器? 我不想只用 for 循环遍历数组然后自己去找。 除非你说我别无选择... 谢谢 最佳答案 如果
我有一张 table ,我想在单击加号图标时在 tr 中打开相同的 tr。我不明白我使用哪个 html 元素打开。 请帮帮我。提前致谢。
对你来说是个小问题:-) 我正在使用 BeautifulSoup 来解析 HTML 页面中表格的内容。问题是在我的输出文件的每一行(CSV/EXCEL)之间,它拉出一个空行......这是 HTML
我制作了一个包含基本信息的表格,每个奇数行和偶数行都有不同的颜色。在 :hover影响它是橙色的,不管它是偶数还是奇数。 但是当我想“分组”3 我发现了一个问题。我试着把它包装成 但它没有用。我的目标
在 lxml 中,我使用 xpath 选择表(具有不同行数)中的所有 tr,除了包含乱码的最后两行。 是否有排除最后两行的模式匹配?我正在浏览 xpath 教程,显然有一个“except”运算符和一个
我在表列表中显示来自数据库的记录。此外,我在每一行中都有一个跟进按钮,如果任何用户单击跟进按钮,则会为特定用户打开一个包含详细信息的弹出窗口。 或者任何其他想法来处理这个问题? 我试过用这样的东西
我有以下表格结构。 当我点击 时我想添加新的 在 旁边其中被点击。 所以结果会是:
使用这个 HTML: 1 2 3 4 我得到这个输出: 1 2 3 4 但我想要的是: 1 2 3 4 如何
嗨,我有一个表格,我在这里做了一些代码来将表格更改为可编辑和可选择...我的要求是 1.当点击一个TR时,它应该变成蓝色,再次点击另一个TR,它将显示蓝色,旧的TR变成白色(威胁不可选择) 我由于一些
这个问题可能令人困惑,但这就是确切的情况.. 我已经动态生成了一些(根据从数据库获取的数据),现在我想允许用户选择其中一个单选按钮,并且我想捕获所单击的行的详细信息,因此请检查我的代码并协助 我的aj
免责声明:HTML、JQuery、Ajax 技能水平 — 垃圾。一直是一个厚客户。 我有一个表单,允许用户输入客户代码和电子邮件地址。我想在客户代码有效时显示客户的姓名。我会错误地通过 Ajax 和
正在尝试添加 其他元素 表中的元素根据 的行跨度该特定元素 元素。在同一功能中,单击 中的此按钮后元素的行数每次增加1,因此也需要增加行数。不知道该怎么做。也许使用 slice()以某种方式发挥作
我是一名优秀的程序员,十分优秀!