克隆html表格与创建总列

Question

我想创建每个线路输入的克隆，并将它们添加到每一行输入，然后总和所有的输入。 （的jsfiddle：https://jsfiddle.net/9LruyLrn/2/）

例如如下：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#btnDel_3').click(function() { 
    if (confirm("Last row will be remove ?")) 
     { 
      var num = $('.clonedInput_3').length; 
      $('#rab' + num).slideUp(25, function() {$(this).remove(); 
      if (num -1 === 1) 
       $('#btnDel_3').attr('disabled', true); 
       $('#btnAdd_3').attr('disabled', false).prop('value', "Add"); 
       $('#btnAdd_3').attr('disabled', false).text("Add");}); 
     } 
    return false; 
}); 
$('#btnAdd_3').attr('disabled', false); 
$('#btnDel_3').attr('disabled', true); 

$('#btnAdd_3').click(function() { 
    var num = $('.clonedInput_3').length, 
    newNum = new Number(num + 1), 
    newElem = $('#rab' + num).clone().attr('id', 'rab' + newNum).fadeIn(25); 
    newElem.find('.ket_1').attr('id', 'ket' + newNum + '_1').attr('name', 'ket' + newNum + '_1').val(''); 
    newElem.find('.input_1').attr('id', 'rab' + newNum + '_1').attr('name', 'rab' + newNum + '_1').val(''); 
    newElem.find('.input_2').attr('id', 'rab' + newNum + '_2').attr('name', 'rab' + newNum + '_2').val(''); 
    newElem.find('.input_3').attr('id', 'rab' + newNum + '_3').attr('name', 'rab' + newNum + '_3').val(''); 
    newElem.find('.input_4').attr('id', 'rab' + newNum + '_4').attr('name', 'rab' + newNum + '_4').val(''); 
    newElem.find('.sum').attr('id', 'sum' + newNum + '_1').attr('name', 'sum' + newNum + '_1').val(''); 
    $('#rab' + num).after(newElem); 
    $('#ket' + newNum + '_1').focus(); 
    $('#btnDel_3').attr('disabled', false); 
}); 
}); 
</script> 
<form > 
<fieldset style="width:75%;margin: 0 auto;"> 
<table> 
    <tr> 
    <td>Total</td> <!-- place for all total row and column will be appear hear--> 
    <td colspan="3"><input type="text" id="total" name="total" disabled="disabled" size="20" placeholder="total column value" /></td> 
    </tr> 
</table> 
<div id="rab1" class="clonedInput_3"> 
    <table> 
    <tr> 
     <td>Detail</td> 
     <td><input type="text" class="ket_1" id="ket1_1" name="ket1_1" size="20" maxlength="80" onfocus="coloring(this.id)" /></td> 
     <td><input type="text" class="input_1" id="rab1_1" name="rab1_1" size="5" maxlength="20" onfocus="coloring(this.id)" /></td> 
     <td><input type="text" class="input_2" id="rab1_2" name="rab1_2" size="5" maxlength="20" onfocus="coloring(this.id)" /></td> 
     <td><input type="text" class="input_3" id="rab1_3" name="rab1_3" size="5" maxlength="20" onfocus="coloring(this.id)" /></td> 
     <td><input type="text" class="input_4" id="rab1_4" name="rab1_4" size="5" maxlength="20" onfocus="coloring(this.id)" /></td> 
     <td><input type="text" class="sum_1" id="sum1_1" name="sum1_1" size="10" disabled="disabled" placeholder="total rows value" /></td><!-- place for total row--> 
    </tr> 
    </table> 
</div> 
<p> 
    <button type="button" id="btnAdd_3" name="btnAdd_3" class="butadd3 btn btn-primary">Add</button> 
    <button type="button" id="btnDel_3" name="btnDel_3" class="butdel3 btn btn-danger">Remove</button> 
</p> 
</fieldset> 
</form> 

我难以作出关于所有输入的合计值的脚本时。 谁能帮助我？

Answer 1

$(document).ready(function() { 
     $('#btnDel_3').click(function() { 
      if (confirm("Last row will be remove ?")) { 
       var num = $('.clonedInput_3').length; 
       $('#rab' + num).slideUp(25, function() { 
        $(this).remove(); 
        if (num - 1 === 1) 
         $('#btnDel_3').attr('disabled', true); 
        $('#btnAdd_3').attr('disabled', false).prop('value', "Add"); 
        $('#btnAdd_3').attr('disabled', false).text("Add"); 
       }); 
      } 
      return false; 
     }); 
     $('#btnAdd_3').attr('disabled', false); 
     $('#btnDel_3').attr('disabled', true); 

     $('#btnAdd_3').click(function() { 
      var num = $('.clonedInput_3').length, 
      newNum = new Number(num + 1), 
      newElem = $('#rab' + num).clone().attr('id', 'rab' + newNum).fadeIn(25); 
      newElem.find('.ket_1').attr('id', 'ket' + newNum + '_1').attr('name', 'ket' + newNum + '_1').val(''); 
      newElem.find('.input_1').attr('id', 'rab' + newNum + '_1').attr('name', 'rab' + newNum + '_1').val(''); 
      newElem.find('.input_2').attr('id', 'rab' + newNum + '_2').attr('name', 'rab' + newNum + '_2').val(''); 
      newElem.find('.input_3').attr('id', 'rab' + newNum + '_3').attr('name', 'rab' + newNum + '_3').val(''); 
      newElem.find('.input_4').attr('id', 'rab' + newNum + '_4').attr('name', 'rab' + newNum + '_4').val(''); 
      newElem.find('.sum').attr('id', 'sum' + newNum + '_1').attr('name', 'sum' + newNum + '_1').val(''); 
      $('#rab' + num).after(newElem); 
      $('#ket' + newNum + '_1').focus(); 
      $('#btnDel_3').attr('disabled', false); 


      $('.clonedInput_3').find('table').each(function() { 
       total = 0; 
       $(this).find('tr td:gt(1):lt(4)').each(function() { 
        if ($(this).find('input').val() != "") { 
         total = total + parseInt($(this).find('input').val(), 10); 
        } 
       }) 
       $(this).find('tr td:last').find('input').val(total); 
      }); 
      total = 0; 
      $('.clonedInput_3').find('table tr td:last').each(function() { 
       if ($(this).find('input').val() != "") { 
        total = total + parseInt($(this).find('input').val(), 10); 
       } 
      }); 
      $('#total').val(total); 
     }); 

    }); 

<fieldset style="width:75%;margin: 0 auto;"> 
<table> 
    <tr> 
    <td>Total</td> 
    <td colspan="3"><input type="text" id="total" name="total" disabled="disabled" size="20" placeholder="total all col" value="0"/></td> 
    </tr> 
</table> 
<div id="rab1" class="clonedInput_3"> 
    <table> 
    <tr> 
     <td>Detail</td> 
     <td><input type="text" class="ket_1" id="ket1_1" name="ket1_1" size="8" maxlength="80" placeholder="Desc." /></td> 
     <td><input type="text" class="input" id="rab1_1" name="rab1_1" size="4" maxlength="20" placeholder="Col 1" /></td> 
     <td><input type="text" class="input" id="rab1_2" name="rab1_2" size="4" maxlength="20" placeholder="Col 2" /></td> 
     <td><input type="text" class="input" id="rab1_3" name="rab1_3" size="4" maxlength="20" placeholder="Col 3" /></td> 
     <td><input type="text" class="input" id="rab1_4" name="rab1_4" size="4" maxlength="20" placeholder="Col 4" /></td> 
     <td><input type="text" class="sum_1" id="sum1_1" name="sum1_1" size="15" disabled="disabled" placeholder="total row" /></td> 
    </tr> 
    </table> 
</div> 
<p> 
    <button type="button" id="btnAdd_3" name="btnAdd_3" class="butadd3 btn btn-primary">Add</button> 
    <button type="button" id="btnDel_3" name="btnDel_3" class="butdel3 btn btn-danger">Remove</button> 
</p>