Question

这是我的html文件。在提前添加另一个row.plz post解决方案后，javascript无法正常运行

<div style="margin:10%;">
        <table id="tb" class="table table-list table-striped" style="width:40%;">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Title</th>
                    <th>Cost</th>
                    <th>Date</th>
                    <th>Description</th>
                    <th>Net</th>
                    <th>Vat(%)</th>
                    <th>Gross</th>
                </tr>
            </thead>
            <tbody id="row_div">
                <tr>
                    <td>1</td>
                    <td>
                        <input type="text" id="title" class="input-medium" name="title" cost_class="title" />
                    </td>
                    <td>
                        <input type="text" id="cos" class="input-medium" name="cost" cost_class="cost_type" />
                    </td>
                    <td>
                        <input type="text" id="datepicker" class="date_Picker" name="date1" date_class="date_type" />
                    </td>
                    <td>
                        <input type="text" id="des" class="test" name="description" description_class="description_type" />
                    </td>
                    <td>
                        <input type="text" id="net" name="Net" class="num1">
                    </td>
                    <td>
                        <input type="text" id="vat" name="Vat" class="num2">
                    </td>
                    <td>
                        <input type="text" id="gross" name="Gross" class="sum">
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="row" style="margin-left:20px;"><a href="javascript:add_tr();">Add</a>&nbsp;|&nbsp; <a href="javascript:remove_tr();">Remove</a>

        </div>
    </div>

这是我的js文件。对于第一行javascript工作正常但是对于另一行javascript无效。

$(function () {

    $(document).on("click", ".date_Picker", function () {

        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        }).datepicker("show");
    });
});

var intTextBox = 1;
//FUNCTION TO ADD File BOX ELEMENT
function add_tr() {
    if (intTextBox > 0) {

        intTextBox = intTextBox + 1;
        var contentID = document.getElementById('row_div');
        var newtr = document.createElement('tr');
        newtr.setAttribute('id', 'floorstrText' + intTextBox);
        newtr.innerHTML = "<td>" + intTextBox + "</td><td><input type='text' id=title" + intTextBox + " name=title" + intTextBox + " class='input-medium cost' cost_class='cost_type'/></td><td><input type='text' id=cos" + intTextBox + " name=cost" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input  name=date" + intTextBox + " type='text' class='date_Picker input-medium'  id=dat" + intTextBox + " date_class='date_type'/></td><td><input type='text' id=des" + intTextBox + " name=des" + intTextBox + " description_class='description_type' /></td><td><input  name=Net" + intTextBox + " type='text' class='num1 key'  id=net" + intTextBox + " /></td><td><input  name=Vat" + intTextBox + " type='text' class='num2 key'  id=dat" + intTextBox + " /></td><td><input  name=Gross" + intTextBox + " type='text' class='sum'  id=gross" + intTextBox + "/></td>";
        contentID.appendChild(newtr);
        gross_amount();
    }

}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_tr() {
    if (intTextBox != 0) {
        var contentID = document.getElementById('row_div');
        contentID.removeChild(document.getElementById('floorstrText' + intTextBox));
        intTextBox = intTextBox - 1;
    }
}



  $(document).ready(function(text) {
    //this calculates values automatically 
    //gross_amount();
    //alert(text);
    $("#net, #vat").on("keydown keyup", function() {
        gross_amount();
    });
    function gross_amount(text) {
        //alert(text);
            var Net = document.getElementById('net').value;
            var Vat = document.getElementById('vat').value;
            var Gross = parseFloat(Net) +(parseFloat(Vat)*parseFloat(Net)/100);

            if (!isNaN(Gross)) {
                document.getElementById('gross').value = Gross;

            }
        }

});

这是我的jsfiddle链接https://jsfiddle.net/affan123/49sz06pp/17/

Answer 1

很多小清理，但正如前面提到的那样，移动你的功能将使其正常工作：https://jsfiddle.net/Twisty/49sz06pp/25/

<强> JQuery的

$(function() {
  $(document).on("click", ".date_Picker", function() {
    $(this).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd-mm-yy'
    }).datepicker("show");
  });
});

var intTextBox = 1;
//FUNCTION TO ADD File BOX ELEMENT
function add_tr() {
  if (intTextBox > 0) {
    intTextBox = intTextBox + 1;
    var contentID = $('#row_div');
    var newtr = document.createElement('tr');
    newtr.setAttribute('id', 'floorstrText' + intTextBox);
    newtr.innerHTML = "<td>" + intTextBox + "</td><td><input type='text' id=title" + intTextBox + " name=title" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input type='text' id=cos" + intTextBox + " name=cost" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input  name=date" + intTextBox + " type='text' class='date_Picker input-medium'  id=dat" + intTextBox + " date_class='date_type'/></td><td><input type='text' id=des" + intTextBox + " name=des" + intTextBox + " description_class='description_type' /></td><td><input  name=Net" + intTextBox + " type='text' class='num2 key'  id=net" + intTextBox + " /></td><td><input  name=Vat" + intTextBox + " type='text' class='num2 key'  id=dat" + intTextBox + " /></td><td><input  name=Gross" + intTextBox + " type='text' class='sum'  id=gross" + intTextBox + "/></td>";
    contentID.append(newtr);
    gross_amount();
  }
}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_tr() {
    if (intTextBox !== 0) {
        $('#floorstrText' + intTextBox).remove();
        intTextBox = intTextBox - 1;
    }
}

function gross_amount(text) {
    //alert(text);
    var Net = $('#net').val();
    var Vat = $('#vat').val();
    var Gross = parseFloat(Net) + (parseFloat(Vat) * parseFloat(Net) / 100);
    if (!isNaN(Gross)) {
      $('#gross').val(Gross);
    }
}

$(document).ready(function(text) {
  //this calculates values automatically 
  //gross_amount();
  //alert(text);
  $("#net, #vat").on("keydown keyup", function() {
    gross_amount();
  });
});

添加另一行

1 个答案: