javascript - 如何将所需的输入字段放入我的 Js 代码中

Question

如何将必填字段放入我的 Js 代码中 我在 xml View 中设置了 required = true 但它确实阻止了所有表单 如何为 js 代码添加所需的 jQuery

这是我的 jQuery 代码:

    // table  course
    jQuery(document).ready(function() {
    var id = 0;
    var cr = 0;
      jQuery("#addcourserow").click(function() {
        id++;  
        var row = jQuery('.courserow tr').clone(true);
        var c = 1;
        row.find("input").each(function(){
          if (c === 1) {
              $(this).attr('name','course_name_'+id);     
          }
          else if (c === 2) {
              $(this).attr('name','course_duration_'+id);     
          }
          else if (c === 3) {
              $(this).attr('name','course_date_'+id);     
          }
          c++;
        });
        row.appendTo('#CourseTable');        
        return false;

});       

  $('.remove').on("click", function() {
  $(this).parents("tr").remove();
});
}); 

这是我的 XML

<!-- Course -->


<table id="CourseTable">
  <thead>
    <th>name</th>
    <th>duration</th> 

    <th>date</th> 
  </thead>
  <tr id="tr_course">
    <td><input type="text" name="course_name_1" id="course_name"/></td>
    <td><input type="text" name="course_duration_1" id="course_duration"/></td>
    <td><input type="date" name="course_date_1" id="course_date" /></td> 
    <td><button class="remove">Remove</button></td>
  </tr>
</table>

<input type="button" id="addcourserow" value="add row" />

<table class="courserow" style="display:none">
  <tr>
    <td><input type="text" id="course_name" /></td>
    <td><input type="text" id="course_duration"/></td>
    <td><input type="date" id="course_date"/></td> 
    <td><button class="remove">Remove</button></td>
  </tr>
</table>
</div>

我在这里添加了codepen

Answer 1

请考虑以下代码。

$(function() {
  var id = 0;
  var cr = 0;
  var names = [
    "course_name",
    "course_duration",
    "course_date"
  ];
  $("#addcourserow").click(function() {
    var row = $('#course-row-template tr').clone(true);
    id++;
    var c = 0;
    row.find("input").each(function() {
      var inpId = $(this).attr("id") + "_" + id;
      $(this).attr({
        id: inpId,
        name: names[c++] + "_" + id
      }).prop("required", true);
      console.log($(this));
    });
    row.appendTo('#CourseTable');
    return false;
  });

  $('.remove').on("click", function() {
    $(this).parents("tr").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table id="CourseTable">
  <thead>
    <th>name</th>
    <th>duration</th>
    <th>date</th>
  </thead>
  <tr id="tr_course">
    <td><input type="text" id="course_name_0" /></td>
    <td><input type="text" id="course_duration_0" /></td>
    <td><input type="date" id="course_date_0" /></td>
    <td><button class="remove">Remove</button></td>
  </tr>
</table>

<input type="button" id="addcourserow" value="Add New Row" />

<table id="course-row-template" style="display:none">
  <tr>
    <td><input type="text" id="course_name" /></td>
    <td><input type="text" id="course_duration" /></td>
    <td><input type="date" id="course_date" /></td>
    <td><button class="remove">Remove</button></td>
  </tr>
</table>

这将确保每个 <input>具有唯一的 ID 和名称。它还为它们中的每一个添加了所需的属性。

希望对您有所帮助。