jQuery中的克隆表行和數學函數-如何正確解決？

Question

我不知道從哪里開始？

（文本框A /文本框B）=文本框C

並自動重復/克隆此表行。更改文本字段B的鍵。從根本上講，這意味着在進行第一次計算后，將彈出另一行，其中包含唯一的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 )+ "%");

    });

}）;

Answer 1

我努力理解您的問題。 我已經將您的問題解釋為：

• 在A或B的組合上，計算A / B，然后將結果放入C中
• 更改B時，添加具有唯一ID的新行。
• 繼續。

演示： 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
});

Answer 2

首先，我有一個非常接近Rob答案的解決方案： http : //jsfiddle.net/49DGP/2/