如何使用jquery动态地减去每个表行中的列值

时间:2014-09-23 08:03:06

标签: jquery

我有一个由jquery动态构建的表,我想从第二列中减去第三列输入中的值,并将值存储在创建的每一行的第三列中....

//表创建

$('#addRow').click(function(){          
    table= $('.tg-table-light > tbody');
    newRow =  "<tr class='tg-even'><td><div align='center'>"+i+"</div></td>\n\
                   <td><input type='text' id='' name='capsdata1[]' size='20' class='num' required tabindex='1'/></td>\n\
                   <td><input type='text' id='' name='capsdata2[]' size='20' class='num1' required tabindex='1'/></td>\n\
                   <td><input type='text' id='' name='capsdata3[]' size='20' class='num2' readonly tabindex='1'/></td>\n\
                   <td><button id='remRow'>-Remove</button></td>\n\
               </tr>";
               i++; 
               $('.tg-table-light > tbody tr:last').before( $(newRow) );         
       return false;
    });

  //This is my subtraction code
  $(".tg-table-light >tbody input.num1").keyup(function() {
        value1 = $(this).closest("tr").find("input.num").val();
        value2 = $(this).closest("tr").find("input.num1").val();
        $(this).closest("tr").find("input.num2").val(value1 - value2);
  }

建议

2 个答案:

答案 0 :(得分:0)

在动态创建元素时。

您需要使用Event Delegation委托事件方法{。}}来使用.on()

$(document).on(event,selector,event_handler)

实施例

$(".tg-table-light >tbody").on('click', 'input.num1', function() {
    var tr = $(this).closest("tr");
    // Conver your variables to numbers, notice +
    var value1 = +tr.find("input.num").val(); 
    var value2 = +tr.find("input.num1").val();
    tr.find("input.num2").val(value1 - value2);
});

答案 1 :(得分:0)

和value2直接使用$(this).val()

$(".tg-table-light >tbody input.num1").keyup(function() {
        value1 = $(this).closest("tr").find("input.num").val();
        value2 = $(this).val();
        $(this).closest("tr").find("input.num2").val(value1 - value2); 
});