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

Question

如何将所需字段放入我的Js代码中我在xml视图中设置了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 和名称。 它还为它们中的每一个添加了所需的属性。

希望有帮助。

Answer 2

我找到答案

   jQuery(document).ready(function() {
        var id = 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).prop("required", true);      
          }
          else if (c === 2) {
              $(this).attr('name','course_duration_'+id).prop("required", true);      
          }
          else if (c === 3) {
              $(this).attr('name','course_date_'+id).prop("required", true);      
          }
          c++;
        });
        row.appendTo('#CourseTable');        
        return false;

});       

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

我在我的 Xml 中添加了 required

<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" required="required"/></td>
                                                      <td><input type="text" name="course_duration_1" id="course_duration" required="required"/></td>
                                                      <td><input type="date" name="course_date_1" id="course_date" required="required"/></td> 
                                                         <td><button class="remove">Remove</button></td>
                                                      </tr>
                                                    </table>