Question

我有一张表格。我想创建动态行。我写了一个代码，但它没有用。在这个fom中，存在5个字段。如果任何人点击添加更多其他研究，则应创建另外5行。请给出任何解决方案。

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script type="text/javascript">
    var rowCount = 1;
    function addMoreRows(frm) {
   rowCount ++;
      var recRow = '<p id="rowCount'+rowCount+'">   <div class="col-sm-3 text-left">College&nbsp;Name: </div>
        <div class="col-sm-9"><input type="text" name="cname" placeholder="College Name" class="form-control" /></div>

        <div class="col-sm-3 text-left">Affiliated&nbsp;University: </div>
     <div class="col-sm-9"><input type="text" name="univ" placeholder="Affiliated University" class="form-control" /></div>
   <div class="col-sm-3 text-left">Course&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="Course Name" class="form-control" /></div>
<div class="col-sm-3 text-left">Major&nbsp;Subject: </div>
<div class="col-sm-9"><input type="text" name="msub" placeholder="Major Subject" class="form-control" /></div>
<div class="col-sm-3 text-left">Final&nbsp;Percentage: </div>
<div class="col-sm-9"><input type="text" name="fper" placeholder="Final Percentage" class="form-control" /></div>


      <a href="javascript:void(0);" onclick="removeRow ('+rowCount+');">Delete</a></p>';
   jQuery('#addedRows').append(recRow);
    }

 function removeRow(removeNum) {
     jQuery('#rowCount'+removeNum).remove();
     }
     </script>

       <form action="" method="post">
      <h5 align="left"><u style="color:#449D44;">Other Studies</u>-<span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">Add More Other Studies</span></h5>
     <span  id="rowId">
<div class="col-sm-3 text-left">College&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="College Name" class="form-control" /></div>

<div class="col-sm-3 text-left">Affiliated&nbsp;University: </div>
<div class="col-sm-9"><input type="text" name="univ" placeholder="Affiliated University" class="form-control" /></div>
<div class="col-sm-3 text-left">Course&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="Course Name" class="form-control" /></div>
<div class="col-sm-3 text-left">Major&nbsp;Subject: </div>
<div class="col-sm-9"><input type="text" name="msub" placeholder="Major Subject" class="form-control" /></div>
<div class="col-sm-3 text-left">Final&nbsp;Percentage: </div>
<div class="col-sm-9"><input type="text" name="fper" placeholder="Final Percentage" class="form-control" /></div>
</span>
   </form>

Answer 1

尝试使用：

$('#addedRows').append(recRow);

它为我工作。

这是工作jsFiddle

希望它适合你：）

var rowCount = 1;

window.addMoreRows = function(frm) {
  rowCount++;
  var recRow = '<div id="rowCount' + rowCount + '"><div class="col-sm-3 text-left">College Name:</div><div class = "col-sm-9"><input type="text" name = "cname" placeholder = "College Name" class = "form-control"/></div><div class = "col-sm-3 text-left" > Affiliated University: </div><div class = "col-sm-9" ><input type = "text" name = "univ" placeholder = "Affiliated University" class = "form-control" / > </div><div class = "col-sm-3 text-left" > Course Name: </div> <div class = "col-sm-9" ><input type = "text" name = "cname" placeholder = "Course Name" class = "form-control"/></div><div class = "col-sm-3 text-left" > Major & Subject: </div><div class = "col-sm-9"><input type = "text" name = "msub" placeholder = "Major Subject" class = "form-control"/></div><div class = "col-sm-3 text-left"> Final & Percentage: </div><div class = "col-sm-9"><input type = "text" name = "fper" placeholder = "Final Percentage" class = "form-control"/></div><a href = "javascript:void(0);" onclick = "removeRow (' + rowCount + ');" >Delete</a></div> ';
  $('#addedRows').append(recRow);
}
window.removeRow = function(removeNum) {
 $('#rowCount'+removeNum).remove();
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="post" id="addedRows">
  <h5 align="left"><u style="color:#449D44;">Other Studies</u>-<span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows();">Add More Other Studies</span></h5>
  <span id="rowId">
<div class="col-sm-3 text-left">College&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="College Name" class="form-control" /></div>

<div class="col-sm-3 text-left">Affiliated&nbsp;University: </div>
<div class="col-sm-9"><input type="text" name="univ" placeholder="Affiliated University" class="form-control" /></div>
<div class="col-sm-3 text-left">Course&nbsp;Name: </div>
<div class="col-sm-9"><input type="text" name="cname" placeholder="Course Name" class="form-control" /></div>
<div class="col-sm-3 text-left">Major&nbsp;Subject: </div>
<div class="col-sm-9"><input type="text" name="msub" placeholder="Major Subject" class="form-control" /></div>
<div class="col-sm-3 text-left">Final&nbsp;Percentage: </div>
<div class="col-sm-9"><input type="text" name="fper" placeholder="Final Percentage" class="form-control" /></div>
</span>
</form>

动态行创建onclick函数

1 个答案: