Question

I don’t know where to begin?

(textfield A / textfield B) = textfield C

And repeat/clone this table row automaticly .change on keyup of textfield B. Basically meaning that after the first calculation is made, another row will popup with unique ids etc.

<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

I tried hard to understand your question. I have interpreted your question as:

• On keyup of A or B, calculate A/B, and put the result in C
• On change of B, add a new row with unique IDs.
• Continue.

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
});