在jquery中克隆表行和数学函数 - 如何正确处理?

时间:2011-12-16 16:38:33

标签: jquery html clone

我不知道从哪里开始?

(textfield A / textfield B)= textfield C

然后自动重复/克隆此表行。在textfield B的keyup上更改。基本上意味着在第一次计算完成后,另一行将弹出唯一ID等。

<table>
  <tr>
   <td><input type="text" id="A" name="A"></td>
   <td><input type="text" id="B" name="B"></td>
   <td><input type="text" id="C" name="C" value=""></td>
  </tr>
</table>


// Clone table rows
$(function() {
    var i = 1;
    $("#A").clone(function() {
               $("table tr:first").clone(true).find("input").each(function() {
            $(this).val('').attr('id', function(_, id) { return id + i });
            $(this).val('').attr('name', function(_, name) { return name + i });
            }).end().appendTo("table");

        i++;

        $("#C").val(Math.round(($("#A").val() / $("#B").val()) * 100 )+ "%");

    });

});

2 个答案:

答案 0 :(得分:3)

我努力理解你的问题。我把你的问题解释为:

  • 在A或B的密钥上,计算A / B,并将结果放在C
  • 在更改B时,添加一个具有唯一ID的新行。
  • 继续。

DEMO:http://jsfiddle.net/vpsv9/

HTML:

<table id="math-table">
  <tr>
   <td><input type="text" id="A1" name="A"></td>
   <td><input type="text" id="B1" name="B"></td>
   <td><input type="text" id="C1" name="C" value=""></td>
  </tr>
</table>

JavaScript的:

// The first requirement
$("#math-table input").live("keyup", function(){
    var id = this.id.match(/\d+/);
    $("#C"+id).val(  $("#A"+id).val() / $("#B"+id).val()  );
});

// The second requirement:
var uniqueIds = $("#math-table tr").length;
$("#math-table input[id^='B']").live("change", function(){
    var $thisRow = $(this).closest("tr"),
        $clone = $thisRow.clone(),             // Clone row
        $inputs = $clone.find("input").val("");// Reset values, return all inputs
    uniqueIds++; //Increment ID
    $inputs[0].id = "A" + uniqueIds;
    $inputs[1].id = "B" + uniqueIds;
    $inputs[2].id = "C" + uniqueIds;
  //$inputs.eq(0).focus();           // Optionally, focus on the next input field
    $thisRow.after($clone);                    // Add row after current one
});

答案 1 :(得分:0)

Fwiw,我有这个解决方案非常接近Rob的回答:http://jsfiddle.net/49DGP/2/