无法在表中添加动态行 - javascript

Question

我正在尝试构建一种动态表。 基本上，我希望用户输入一些字段并在“添加行”按钮上，用户输入的这些输入将填充下表等等，他可以输入他需要的任意多的行。然后从表行中提取数据并调用服务上传。

我所做的是成功创建了添加行功能。但是有一个输入，用户选择图像然后单击添加行按钮，问题是图像被所有行上的前一个图像替换。

var inc = 1;

function add(tableID) {
	console.log(inc);
	var educationInstitute = $("#educationInstitute").val();
	var educationQualification = $('#educationQualification').find(":selected").val();
	var educationAdmDate = $("#educationAdmDate").val();
	var educationGraDate = $("#educationGraDate").val();
	//previewImage("educationImage", inc);
	//var educationImage = $("#educationImage").val();

	var fullPath = document.getElementById('educationImage').value;
	if (fullPath) {
		var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
		var filename = fullPath.substring(startIndex);
		if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
			filename = filename.substring(1);
		}

	}
	filename.replace(/ /g, '');
	filename = filename.slice(0, -4);
	alert(filename);
	previewImage("educationImage", filename);

	var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + educationInstitute + "</td><td>" + educationQualification + "</td><td>" +
		educationAdmDate + "</td><td>" + educationGraDate + "</td><td><img class='previewImage" + filename + "' src='' /></td></tr>";
	$("#educationTable tbody").append(markup);
}

function del(row) {
	$("table tbody").find('input[name="record"]').each(function() {
		if ($(this).is(":checked")) {
			$(this).parents("tr").remove();
		}
	});
}

function previewImage(id, filename) {
	if (document.getElementById(id).files[0]) {
		console.log("ID");
		var reader = new FileReader();
		reader.onload = function(e) {
			//console.log(e.target.result);
			$('.previewImage' + filename).attr('src', e.target.result);
			inc += 1;
			console.log(inc);
		}
		reader.readAsDataURL(document.getElementById(id).files[0]);
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset style="min-height:100px;">
  <legend>Education Details </legend>
  <div class="row">
   <button onclick="add('educationTable')">Add Table</button>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <input type="text" class="form-control" name="educationInstitute" id="educationInstitute" placeholder="Institue Name" />
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <select class="form-control" name="educationQualification" id="educationQualification">
                    <option value="5">--- Qualification ---</option>
                    <option value="5">Option 1</option>
                    <option value="6">Option 2</option>
                </select>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <input type="text" class="form-control datepicker" name="educationAdmDate" id="educationAdmDate" placeholder="Admission Date" />
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <input type="text" class="form-control datepicker" name="educationGraDate" id="educationGraDate" placeholder="Graduation Date" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <input type="file" class="form-control imageFileinput" name="educationImage" id="educationImage" data-show-preview="false" />
      </div>
    </div>

    <table class="table table-responsive table-bordered order-list" id="educationTable">
      <thead>
        <tr>
          <th>Check</th>
          <th>Institute Name</th>
          <th>Qualification</th>
          <th>Admission Date</th>
          <th>Graduation Date</th>
          <th>Degree Scanned Image</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="row">
    <i class="fa fa-plus-circle fa-2x fa-fw" style="padding-left: 15px;" onclick="AddTableRow.del('educationTable')"></i>
  </div>
</fieldset>

谁能告诉我，我在这里做错了什么？我已经花了 2 天时间。

Answer 1

另一种选择是复制add 上的输入并将其附加到td 中的行中，此字段也可以隐藏，当您想要获取文件时，您可以使用 jquery 获取所有那些相应的输入。

  var markup = `
  <tr>
    <td><input type='checkbox' name='record'></td>
    <td> ${educationInstitute}</td>
    <td> ${educationQualification}</td>
    <td> ${educationAdmDate}</td>
    <td> ${educationGraDate}</td>
    <td class='file_holder'>
      <img class='previewImage${filename}' src='' /> 
      // append the corresponding input file here for later use
    </td>
   </tr>`;
  $("#educationTable tbody").append(markup);
  $("#educationImage").clone().appendTo("#educationTable tbody tr:last-child .file_holder");

这是jsfiddle的例子