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 的 keyup 上，计算 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

Fwiw，我有一个与 Rob 的答案非常接近的解决方案： http://jsfiddle.net/49DGP/2/