如何在HTML表中使用jQuery“each()”?

uidvcgyl  于 2022-11-03  发布在  jQuery
关注(0)|答案(2)|浏览(223)

请看下面的HTML表格:
第一个
使用此表,假设我选中了select_all复选框,则我需要用qty列的值填写“退货数量”列下的所有输入。根据上表,输入值应为(150,250,350)。另外,如果我单击tr内的复选框,则该行的input应填写该行的qty值。
我尝试了类似的方法select_all复选框与each循环,但我搞不清楚我如何使用each为这一点。
希望有人能帮帮我。

8i9zcol2

8i9zcol21#

一个解决方案(在tr上使用每个)是重用您所拥有的:
第一步:将你的处理程序转换成一个函数,这样它就可以被重用了。传入一个tr作为参数:

function selectRow(tr) {
  var inp = tr.find('[name="rtn_qty[item_id]"]');
  var qty = tr.find('.qty').text();
  inp.val(qty);
}

第二步:改变你的处理程序来使用函数(并测试它)

$(document).on('change', '[name="item_inline"]', function(e){
  selectRow($(this).closest("tr"))
})

第3步:在“all”更改中,获取所有行,然后将每一行传递给函数:

$("#select_all").change(function() {
  var rows = $(this).closest("table").find("tbody tr");
  rows.each((i, tr) => selectRow($(tr)))
});

合计:
第一个
通过一些小的改动,我们可以使它更友好
一个
正如注解中所指出的,.val()有一个重载,允许您对.val进行一次调用,例如:

$("#select_all").change(function() {
 $('[name="rtn_qty[item_id]"]').val(function(i, oldval) { 
  return $(this).closest("tr").find(".qty").text();
 }) 
});

这里可能有更好的方法来使用.瓦尔(),但它展示了概念。

qltillow

qltillow2#

我认为最简单的解决方案是捕获任何table〉tbody〉input[type=“checkbox”]的更改事件,并捕获input[name=“select_all”]的更改事件,然后单击前面的输入。
我希望这能有所帮助:)

//On change each table > tbody > input['type="checkbox"']
$('table tbody input[type="checkbox"]').change( function(){
  let parent = $(this).parent().parent();
  let qty = '';
    if( $(this).is(':checked') ){
    qty = $(parent).find('.qty').first().text()
  }
  $(parent).find('input[type="text"]').val(qty)
} )

//On change input[name="select_all"]
$('input[name="select_all"]').change( function(){
  $('table tbody input[type="checkbox"]').click()
} )

第一个

相关问题