Question

如何将必填字段放入我的Js代码中我在required = true视图中设置了xml，但它确实阻止了所有表单如何为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中添加必填项

<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>

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

2 个答案: