Question

我有一个目前正在进行简单计算的表格。我有一个按钮来复制带有增量ID的相同表单，我需要对独立添加的表单进行计算。

var myJson = {
  "platforms": [{
      "name": "Sitecore",
      "id": "Sitecore",
      "tasktype": [{
          "name": "Promobox",
          "id": "Promobox",
          "components": [{
              "name": "Box 0",
              "id": "box0",
              "time": "20"
            },
            {
              "name": "Box 1",
              "id": "box1",
              "time": "30"
            }
          ]
        },
        {
          "name": "Video",
          "id": "Video",
          "components": [{
              "name": "Box 2",
              "id": "box2",
              "time": "25"
            },
            {
              "name": "Box 3",
              "id": "box3",
              "time": "30"
            }
          ]
        }
      ]
    },
    {
      "name": "Siab",
      "id": "Siab",
      "tasktype": [{
          "name": "Newswire",
          "id": "Newswire",
          "components": [{
              "name": "Box 4",
              "id": "box5",
              "time": "50"
            },
            {
              "name": "Box 5",
              "id": "box5",
              "time": "40"
            }
          ]
        },
        {
          "name": "Task Type New",
          "id": "Task Type New",
          "components": [{
              "name": "Box 6",
              "id": "box6",
              "time": "20"
            },
            {
              "name": "Box 7",
              "id": "box7",
              "time": "100"
            }
          ]
        }
      ]
    }
  ]
};



$.each(myJson.platforms, function(index, value) {
  var platform_id;
  var tasktype_id;
  var component_id;

  $("#platform").append('<option rel="' + index + '" value="' + value.id + '">' + value.name + '</option>');

  $("#platform").change(function() {
    $("#tasktype, #component").find("option:gt(0)").remove();
    $("#tasktype").find("option:first").text("Loading...");

    platform_id = $(this).find('option:selected').attr('rel');

    $.each(myJson.platforms[platform_id].tasktype, function(index1, value1) {
      $("#tasktype").find("option:first").text("Select Task Type");
      $("#tasktype").append('<option rel="' + index1 + '" value="' + value1.id + '">' + value1.name + '</option>');
    });

  });


  $("#tasktype").change(function() {
    $("#component").find("option:gt(0)").remove();
    $("#component").find("option:first").text("Loading...");

    tasktype_id = $(this).find('option:selected').attr('rel');

    $.each(myJson.platforms[platform_id].tasktype[tasktype_id].components, function(index2, value2) {
      $("#component").find("option:first").text("Select Component");
      $("#component").append('<option rel="' + index2 + '" value="' + value2.time + '">' + value2.name + '</option>');
    });


  });


});


$(document).ready(function() {
  $('#calculate').click(function() {
    let tr = $("<tr/>").appendTo("#data tbody");
    $('#calc input, #calc select').each(function(index) {
      var input = $(this);
      $(tr).append('<td class=row-' + $(input).attr("id") + '>' + $(input).val() + '</td>');
    });

    const componentFactor = $(tr).children(".row-component").text();
    const units = $(tr).children(".row-units").text();
    const total = componentFactor * units;

    $(tr).append('<td>' + total + '</td>');
  });
});


$(document).ready(function() {
  var calc_index = 0;
  $("#addNew").click(function() {
    calc_index++;
    $("#calc").after($("#calc").clone().attr("id", "calc" + calc_index));
    $("#calc" + calc_index).css("display", "inline");
    $("#calc" + calc_index + " :input").each(function() {
      $(this).attr("name", $(this).attr("name") + calc_index);
      $(this).attr("id", $(this).attr("id") + calc_index);
    });

  });
});


$(document).ready(function() {
  $('#calculate').click(function() {
    let tr = $("<tr/>").appendTo("#data tbody");
    $('#calc1 input, #calc1 select').each(function(index) {
      var input = $(this);
      $(tr).append('<td class=row-' + $(input).attr("id") + '>' + $(input).val() + '</td>');
    });

    const componentFactor = $(tr).children(".row-component").text();
    const units = $(tr).children(".row-units").text();
    const total = componentFactor * units;

    $(tr).append('<td>' + total + '</td>');
  });
});


$("#clear").click(function() {
  location.reload();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Production Units Calculator</h2>

<div class="formset">
  <form id="calc">
    <label>Platform:</label>
    <select id="platform" name="platform">
      <option value="0">Select Platform</option>
    </select>
    <label>Task Type:</label>
    <select id="tasktype" name="tasktype">
      <option value="0">Select Task Type</option>
    </select>
    <label>Component:</label>
    <select id="component" name="component">
      <option value="0">Select Component</option>
    </select>
    <label>Units:</label>
    <input name="units" id="units" type="number" min="0" placeholder="Input Units" />
    <br />
  </form>
</div>

<button id="calculate">Calculate</button>
<button id="addNew">Add New</button>
<button id="clear">Clear</button>


<table style="width:50%" id="data">
  <thead>
    <tr>
      <th>Platform</th>
      <th>Task Type</th>
      <th>Component</th>
      <th>Units</th>
      <th>Time</th>
    </tr>
  </thead>

  <tbody></tbody>

</table>

我能够使用增量ID复制表单，但是一旦通过单击添加新复制表单，重复的表单就不会像第一个一样。

Answer 1

请检查fiddle 您也需要考虑重复ID的更改事件。

 $("#addNew").click(function() {
         calc_index++;
         $("#calc").after($("#calc").clone().attr("id", "calc" + calc_index));
         $("#calc" + calc_index).css("display", "inline");
         $("#calc" + calc_index + " :input").each(function() {
             $(this).attr("name", $(this).attr("name") + calc_index);
             $(this).attr("id", $(this).attr("id") + calc_index);
         });


         //TODO
         $.each(myJson.platforms, function(index, value) {
             var platform_id;
             var tasktype_id;
             var component_id;

             pID = "#platform" + calc_index;
             tID = "#tasktype" + calc_index;
             cID = "#component" + calc_index;

             $(pID).append('<option rel="' + index + '" value="' + value.id + '">' + value.name + '</option>');
             $(pID).change(function() {
                 $(tID, cID).find("option:gt(0)").remove();
                 $(tID).find("option:first").text("Loading...");

                 platform_id = $(this).find('option:selected').attr('rel');
                 $.each(myJson.platforms[platform_id].tasktype, function(index1, value1) {
                     $(tID).find("option:first").text("Select Task Type");
                     $(tID).append('<option rel="' + index1 + '" value="' + value1.id + '">' + value1.name + '</option>');
                 });

             });


             $(tID).change(function() {
                 $(cID).find("option:gt(0)").remove();
                 $(cID).find("option:first").text("Loading...");

                 tasktype_id = $(this).find('option:selected').attr('rel');

                 $.each(myJson.platforms[platform_id].tasktype[tasktype_id].components, function(index2, value2) {
                     $(cID).find("option:first").text("Select Component");
                     $(cID).append('<option rel="' + index2 + '" value="' + value2.time + '">' + value2.name + '</option>');
                 });


             });


         });

复制表单以独立工作

1 个答案: