代码之家 › 专栏 › 技术社区 › Vpa

动态追加DIV并使用jquery中的类名计算DIV内的数据

css html jquery javascript

Vpa · 技术社区 · 6 年前

我想创建一个 div 使用类名添加输入字段并显示值,还创建一个按钮以添加更多与上面具有相同类但只有第一个类的字段 field 可以用来添加输入,我知道我怎么尝试是不正确的。我不想使用ID、增加ID或与ID相关。最好增加 class name 还有什么方法可以保持相同的类名和函数工作。提前谢谢

编辑: 我的问题部分和我的代码片段部分不一样,以便更好地理解。

function addMoreSchedule8WDV() {
  // alert('yeah');
  $("#sch8_wdv").append('<div style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">' +
    '<div class="col-md-12">' +
    '<div class="row">' +
    '<div class="col-md-2">' +
    '<label for="assetName">Name</label><br>' +
    '<input type="text" id="assetName" class="form-control">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetDOP">DOP</label><br>' +
    '<input type="date" id="assetDOP" class="form-control date_of_purchase">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetOC">OC</label><br>' +
    '<input type="number" min="0" id="assetOC" class="form-control originalCost">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetWDV">WDV</label><br>' +
    '<input type="number" min="0" id="assetWDV" class="form-control assWDV">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetADD">ADD</label><br>' +
    '<input type="number" min="0" id="assetADD" class="form-control addition">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetEUL">EUL</label><br>' +
    '<input type="number" min="0" id="assetEUL" class="form-control no_of_year">' +
    '</div>' +
    '</div>' +
    '</div>' +

    '<div class="col-md-12" style="padding-bottom: 10px;">' +
    '<div class="row">' +
    '<div class="col-md-2">' +
    '<label for="assetBDA">BDA</label><br>' +
    '<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetDays">Day Used</label><br>' +
    '<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetRateofDep">Rate of Dep.</label><br>' +
    '<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetDepAmount">Dep. Amount</label><br>' +
    '<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="assetNetBlock">Net Block</label><br>' +
    '<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">' +
    '</div>' +
    '<div class="col-md-2">' +
    '<label for="removeWDV">Remove</label><br>' +
    '<a href="javascript:void(0);" style="width: 100%; padding-left: 5px;" class="btn btn-outline-warning removeSch8">Remove Content</a>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>');
  $("#sch8_wdv").on("click", ".removeSch8", function() {
    $(this).parent().parent().parent().parent().remove();
  });
}

// trigger for Fixed Assets WDV
$(document).on('change', '#yearEnd, .date_of_purchase, .no_of_year, .addition, .originalCost, .assWDV', function() {
  calculateWDVFixedAssets();
});
// end triggered

function calculateWDVFixedAssets() {
  var current_year_input = $("#yearEnd").val()
  var current_year = new Date(current_year_input + '-03-31');
  var last_year = current_year_input - 1;
  var last_year_correct = new Date(last_year + '-04-01');
  var date_of_purchase = new Date($(".date_of_purchase").val());
  var no_of_year = $('.no_of_year').val();
  var original_cost = $('.originalCost').val();
  var addition = $('.addition').val();
  var wdv = $('.assWDV').val();
  var bda, dayUsed;
  if (last_year_correct < date_of_purchase) {
    $(".originalCost").prop('disabled', true);
  } else {
    $(".originalCost").prop('disabled', false);
  }

  // below code is for calculate Day Used
  if (date_of_purchase != '') {
    if (date_of_purchase < last_year_correct) {
      dayUsed = 365;
      $(".dayUsed").val(dayUsed);
    } else if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
      dayUsed = Math.round(Math.abs((current_year.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
      $(".dayUsed").val(dayUsed);
    } else {
      $(".dayUsed").val('');
      $(".originalCost").val('');
      console.log('error');
    }
  }

  // below is for calculate BDA
  if (no_of_year != '') {
    if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
      bda = (no_of_year * 365);
      $(".bdaValue").val(bda);
    } else if (date_of_purchase < last_year_correct) {
      var bda2 = (no_of_year * 365);
      var year_minus = Math.round(Math.abs((last_year_correct.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
      var total = (+bda2 - +year_minus);
      $('.bdaValue').val(total + 1);
    } else {
      $(".originalCost").val('');
      console.log('error');
    }
  }

  // rate of depreciation
  if (original_cost != '' || addition != '' || wdv != '') {
    var bdaPass = $('.bdaValue').val();
    var s = ((+original_cost + +addition) * (5 / 100));
    var c = (+wdv + +addition);
    var n = (bdaPass / 365);
    var xy = (s / c);
    var yz = (1 / n);
    var power = Math.pow(xy, yz);
    var power_new = parseFloat(power.toFixed(2));
    var new_total = (1 - +power) * 100;
    $('.rateOfDep').val(parseFloat(new_total.toFixed(4)));


    // rate of depreciation
    var rate_of_dep = $('.rateOfDep').val();
    var f_rod = ((+wdv + +addition) * (rate_of_dep / 100));
    var day_used_rod = $(".dayUsed").val();
    var s_rod = (day_used_rod / 365);
    var total_rod = (f_rod * s_rod);
    var round_total = Math.round(total_rod);
    $('.depAmount').val(round_total);


    // net block
    var f_netBlock = (+wdv + +addition);
    var dep_net = $('.depAmount').val();
    var net_block = (+f_netBlock - +dep_net);
    $('.netBlock').val(parseFloat(net_block.toFixed(2)));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<p> Try inserting Year Ended = 2018, Name = Test, DOP = 1st April, 2010, OC = 1250000, wdv = 686931, add = null(no need to enter), eul = 15 then it will give the output bda=2919, day used = 365, rate of dep = 25.8986, dep amt = 177906, net block = 509025..</p>

<p>Ignore the console error</p>

<div class="form-group">
  <label for="yearEnd">Year Ended in</label>
  <input type="number" min="0" name="yearEnded" id="yearEnd" class="form-control" placeholder="Eg:- 2001" required>
</div>

<div style="border-style: dotted; border-radius: 10px; border-width: thin;">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-2">
        <label for="assetName">Name</label><br>
        <input type="text" id="assetName" class="form-control">
      </div>
      <div class="col-md-2">
        <label for="assetDOP">DOP</label><br>
        <input type="date" id="assetDOP" class="form-control date_of_purchase">
      </div>
      <div class="col-md-2">
        <label for="assetOC">OC</label><br>
        <input type="number" min="0" id="assetOC" class="form-control originalCost">
      </div>
      <div class="col-md-2">
        <label for="assetWDV">WDV</label><br>
        <input type="number" min="0" id="assetWDV" class="form-control assWDV">
      </div>
      <div class="col-md-2">
        <label for="assetADD">ADD</label><br>
        <input type="number" min="0" id="assetADD" class="form-control addition">
      </div>
      <div class="col-md-2">
        <label for="assetEUL">EUL</label><br>
        <input type="number" min="0" id="assetEUL" class="form-control no_of_year">
      </div>
    </div>
  </div>

  <div class="col-md-12" style="padding-bottom: 10px;">
    <div class="row">
      <div class="col-md-2">
        <label for="assetBDA">BDA</label><br>
        <input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">
      </div>
      <div class="col-md-2">
        <label for="assetDays">Day Used</label><br>
        <input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">
      </div>
      <div class="col-md-2">
        <label for="assetRateofDep">Rate of Dep.</label><br>
        <input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">
      </div>
      <div class="col-md-2">
        <label for="assetDepAmount">Dep. Amount</label><br>
        <input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">
      </div>
      <div class="col-md-2">
        <label for="assetNetBlock">Net Block</label><br>
        <input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">
      </div>
    </div>
  </div>
</div>

<div id="sch8_wdv"></div>
<a href="javascript:void(0);" style=" margin-top: 10px;margin-bottom: 10px!important;" onclick="addMoreSchedule8WDV()" class="btn btn-primary btn-sm">Add More</a>

3 回复 | 直到 6 年前

Zakaria Acharki 6 年前

Working fiddle .

您可以附加 input 事件同时发送到两个输入:

$(document).on('input', '.first_no, .second_no', function() {
  var parent    = $(this).parent();

  var first_no  = parent.find('.first_no').val();
  var second_no = parent.find('.second_no').val();
  var total     = parent.find('.total');

  if (!isNaN(first_no) && !isNaN(second_no)) {
    total.val(+first_no + +second_no);
  }
});

function addMoreField() {
  $('#expanded').append(
    '<div><br>' +
    '<input type="number" class="first_no">' +
    ' plus ' +
    '<input type="number" class="second_no">' +
    ' is equal ' +
    '<input type="number" class="total">' +
    '</div>'
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="number" class="first_no"> plus
  <input type="number" class="second_no"> is equal
  <input type="number" class="total">
</div>

<div id="expanded"></div>
<br>
<button onclick="addMoreField()">Add More</button>

Roland Ruul 6 年前

做了一个简短的版本。

$(document).on('input', '.a, .b, .c', function() {
   var i = $(this).parent().find('input');
   i[2].value = parseInt(i[0].value) + parseInt(i[1].value);
});

$('#add').on('click', function() {
    $('.main').append('\
    	<div class="computation">\
            <input type="number" class="a"> + \
            <input type="number" class="b"> = \
            <input type="number" class="c">\
        </div>\
    ');
});

.computation {
    padding: 15px;
    padding-bottom: 0;
}

button {
    margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="computation">
        <input type="number" class="a"> +
        <input type="number" class="b"> =
        <input type="number" class="c">
    </div>
</div>

<button id="add">Add more</button>

Dipak 6 年前

var addFields = function() {
  var container = $(".dynamic-section");
  var newFields = $(".row:first").clone();
  $(newFields).find("input").val("");
  container.append(newFields);
};

var add = function(num1, num2) {
  num1 = (num1.length > 0 && !isNaN(num1)) ? parseInt(num1) : 0;
  num2 = (num2.length > 0 && !isNaN(num2)) ? parseInt(num2) : 0;
  return num1 + num2;
}

$(document).on("keyup", ".first,.second", function(e) {
  var currentRow = $(e.target.parentElement);
  var first = currentRow.find(".first").val();
  var second = currentRow.find(".second").val();
  var result = currentRow.find(".result");
  result.val(add(first, second));
});

    body {
      padding: 10px;
    }
    
    .row {
      padding: 10px 0px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row" >
  <input type="number" class="first"  placeholder="first"/> +
  <input type="number" class="second" placeholder="second"/> =
  <input type="number" class="result" placeholder="result"/>
</div>

<div class="dynamic-section"></div>

<button type="button" name="addFields" onclick="addFields()">Add fields</button>